/* DS Player - v0.2.9 */
:root { --ds-player-height: 64px; }

#ds-player-root, #ds-player-root * { box-sizing: border-box; }

#ds-player-root { pointer-events: none; }
#ds-player-root .ds-player__bar,
#ds-player-root .ds-player__panel { pointer-events: auto; }

#ds-player-root.ds-player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Keep third-party popups above the player */
.cky-consent-bar,
.cky-consent-container,
#cookie-law-info-bar,
.cookie-law-info-bar,
.cli-bar-container,
.cli-style-v2,
.cli-style-v3,
.mailpoet_form_popup,
.mailpoet_form,
.mailpoet_form_widget,
.mailpoet_form_popup_overlay {
  z-index: 100000 !important;
}

.ds-player__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  min-height: var(--ds-player-height);
  background: rgba(18,18,20,0.96);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.ds-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
}
.ds-btn--primary { font-size: 16px; padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.ds-btn--queue { font-size: 16px; }

.ds-player__art {
  width: 38px; height: 38px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.ds-player__artImg { width: 100%; height: 100%; object-fit: cover; display:block; }
.ds-player__artImg.ds-is-empty { opacity: 0.15; filter: grayscale(1); }

.ds-player__meta { min-width: 0; flex: 1 1 auto; }
.ds-player__title { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-player__artist { font-size: 12px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ds-player__time { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: 0.9; }
.ds-player__seek { width: 160px; max-width: 32vw; }

.ds-player__vol { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: 0.9; }
.ds-player__vol input[type="range"] { width: 110px; }

.ds-player__panel {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--ds-player-height);
  max-height: 55vh;
  overflow: auto;
  background: rgba(18,18,20,0.98);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 100000;
}

.ds-player__panelHeader {
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; margin-bottom: 10px;
}
.ds-player__panelActions { display:flex; gap: 8px; align-items:center; }

.ds-player__resumeNotice {
  margin: 8px 0 10px 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
}
.ds-player__resumeText { font-size: 12px; opacity: 0.85; margin-bottom: 8px; }

.ds-player__queue { list-style: none; padding: 0; margin: 0; }
.ds-qitem { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ds-qitem__btn { text-align: left; width: 100%; background: transparent; border: 0; color: #fff; padding: 0; cursor: pointer; }
.ds-qitem__title { display:block; font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-qitem__artist { display:block; font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-qitem__rm { border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color:#fff; border-radius:10px; padding:6px 8px; cursor:pointer; }

@media (max-width: 560px) {
  .ds-player__bar { gap: 8px; padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .ds-player__vol { display:none; }
  .ds-player__time { display:none; }
  .ds-player__seek { width: 120px; max-width: 40vw; }
  .ds-player__title { font-size: 12px; }
  .ds-player__artist { font-size: 11px; }
}

body { padding-bottom: var(--ds-player-height); }


/* WooCommerce Add to Player */
.ds-wc-add-to-player-wrap{ margin-top:10px; }
.ds-wc-add-to-player-wrap--loop{ margin-top:8px; }