/* djpunjab bottom player bar */
:root {
  --djp-bg: #030303;
  --djp-accent: #2288ee;
  --djp-blue: #2288ee;
  --djp-text: #ffffff;
  --djp-muted: #b5b5b5;
  --djp-track: #3a3a3a;
}

body.djp-has-player { padding-bottom: 84px; }

#djp-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--djp-bg); color: var(--djp-text);
  border-top: 3px solid var(--djp-accent);
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;
  box-shadow: 0 -4px 14px rgba(0,0,0,.35);
  transform: translateY(110%); transition: transform .25s ease;
}
#djp-player.djp-show { transform: translateY(0); }

#djp-player .djp-seek {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 0; font-size: 11px; color: var(--djp-muted);
  font-variant-numeric: tabular-nums;
}
#djp-player input[type=range] {
  flex: 1; height: 4px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; border-radius: 4px;
  background: linear-gradient(to right, var(--djp-blue) var(--djp-pct, 0%), var(--djp-track) var(--djp-pct, 0%));
}
#djp-player input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
}
#djp-player input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }

#djp-player .djp-main {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 8px;
  max-width: 960px; margin: 0 auto;
}
#djp-player .djp-cover {
  width: 44px; height: 44px; border-radius: 4px; object-fit: cover;
  background: #222; flex: none;
}
#djp-player .djp-info { flex: 1; min-width: 0; line-height: 1.35; }
#djp-player .djp-title, #djp-player .djp-title:link, #djp-player .djp-title:visited {
  display: block; color: var(--djp-text); font-weight: bold; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#djp-player .djp-artist {
  display: block; color: var(--djp-muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#djp-player .djp-ctrls { display: flex; align-items: center; gap: 4px; flex: none; }
#djp-player button {
  background: none; border: 0; color: var(--djp-text); cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#djp-player button:hover { background: rgba(255,255,255,.1); }
#djp-player button:disabled { opacity: .35; cursor: default; background: none; }
#djp-player .djp-toggle { width: 42px; height: 42px; background: var(--djp-accent); color: #fff; }
#djp-player .djp-toggle:hover { background: #0063c9; }
#djp-player svg { width: 20px; height: 20px; fill: currentColor; }
#djp-player .djp-dl, #djp-player .djp-dl:link, #djp-player .djp-dl:visited {
  color: var(--djp-accent); font-size: 12px; font-weight: bold; padding: 6px 8px;
  border: 1px solid var(--djp-accent); border-radius: 4px; flex: none;
}
#djp-player .djp-msg { color: #ff8a80; }
#djp-player.djp-loading .djp-toggle { animation: djp-pulse 1s infinite ease-in-out; }
@keyframes djp-pulse { 50% { opacity: .6; } }

@media (max-width: 520px) {
  #djp-player .djp-dl, #djp-player .djp-prev { display: none; }
  #djp-player .djp-main { gap: 8px; }
}

/* play buttons inside song lists */
.touch-new p.djp-row { display: flex; align-items: center; gap: 6px; }
.touch-new p.djp-row a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.djp-play {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: #2288ee; color: #fff; font-size: 12px; line-height: 30px; padding: 0;
}
.djp-play:hover { background: #0063c9; }
.djp-play.djp-playing { background: #0063c9; color: #fff; box-shadow: 0 0 0 3px rgba(34,136,238,.35); }
.djp-play.djp-big {
  width: auto; height: auto; border-radius: 4px; padding: 10px 22px; font-size: 15px; font-weight: bold;
  display: block; margin: 10px auto;
}

/* once the bar is active, the page's own <audio> is replaced by the play button */
html.djp-on .djp-inline-audio { display: none; }
html:not(.djp-on) .djp-play.djp-big { display: none; }

/* light top progress while a page loads over ajax */
#djp-nav-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10000;
  background: var(--djp-accent); transition: width .3s ease, opacity .3s ease; opacity: 0;
}