/* ==========================================================================
   Ba Dum Tish — site-wide music player bar + on-release tracklist.
   A fixed bottom bar (navy, cream text) that follows you across the shop,
   plus the "Listen" panel injected onto release pages by player.js.
   ========================================================================== */

/* Keep content clear of the fixed bar when it's showing. */
body.bdt-has-player { padding-bottom: 92px; }
@media (max-width: 640px) { body.bdt-has-player { padding-bottom: 148px; } }

/* Never show the bar over the front-page landing takeover. */
body.bdt-landing #bdt-bar { display: none !important; }

/* --------------------------------------------------------------------------
   The bar
   -------------------------------------------------------------------------- */
#bdt-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bdt-ink, #312783);
  color: var(--bdt-cream, #FFFAD2);
  border-top: var(--bdt-outline, 3px) solid var(--bdt-ink-2, #241A63);
  box-shadow: 0 -6px 0 rgba(36, 26, 99, .25);
  font-family: var(--bdt-font-body, system-ui, sans-serif);
}
#bdt-bar[hidden] { display: none; }

.bdt-bar__inner {
  display: flex; align-items: center; gap: 14px;
  max-width: 1200px; margin: 0 auto; padding: 10px 16px;
}

/* Cover art (also a link into the release). */
.bdt-bar__art {
  flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 0; cursor: pointer;
  background: var(--bdt-white, #fff); border-radius: var(--bdt-radius-sm, 12px);
  overflow: hidden; box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
}
.bdt-bar__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bdt-bar__art img:not([src]), .bdt-bar__art img[src=""] { visibility: hidden; }

/* Now-playing text. */
.bdt-bar__meta { flex: 1 1 auto; min-width: 0; }
.bdt-bar__track {
  font-family: var(--bdt-font-head, sans-serif); font-size: 1rem; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bdt-white, #fff);
}
.bdt-bar__release {
  font-size: .8rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Transport buttons. */
.bdt-bar__transport { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.bdt-bar__transport button {
  appearance: none; border: 0; cursor: pointer; color: var(--bdt-ink, #312783);
  background: var(--bdt-cream, #FFFAD2); border-radius: 999px;
  font-size: .95rem; line-height: 1; display: grid; place-items: center;
  transition: transform .12s ease, background .12s ease;
}
.bdt-bar__transport button:hover { background: var(--bdt-white, #fff); transform: translateY(-1px); }
.bdt-bar__transport .bdt-bar__pp { width: 44px; height: 44px; font-size: 1.05rem; background: var(--bdt-pink, #F5B3C5); }
.bdt-bar__transport .bdt-bar__step { width: 36px; height: 36px; }

/* Seek bar. */
.bdt-bar__seek { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; min-width: 120px; max-width: 360px; }
.bdt-bar__seek time, .bdt-bar__seek span { font-variant-numeric: tabular-nums; font-size: .72rem; opacity: .85; width: 34px; text-align: center; }
.bdt-bar__seek input[type="range"] {
  flex: 1 1 auto; width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  background: rgba(255, 250, 210, .3); border-radius: 999px; outline: none; cursor: pointer;
}
.bdt-bar__seek input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bdt-pink, #F5B3C5); border: 2px solid var(--bdt-white, #fff); cursor: pointer;
}
.bdt-bar__seek input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--bdt-pink, #F5B3C5); border: 2px solid var(--bdt-white, #fff); cursor: pointer;
}

/* Cart + queue buttons. */
.bdt-bar__cart, .bdt-bar__queuebtn {
  flex: 0 0 auto; appearance: none; cursor: pointer; border-radius: 999px;
  font-family: var(--bdt-font-head, sans-serif); text-transform: uppercase; letter-spacing: .5px;
  font-size: .8rem; padding: 10px 16px; border: 2px solid var(--bdt-cream, #FFFAD2);
}
.bdt-bar__cart { background: var(--bdt-teal, #22B8C5); color: var(--bdt-white, #fff); border-color: var(--bdt-white, #fff); }
.bdt-bar__cart:hover { background: var(--bdt-teal-deep, #159AA6); }
.bdt-bar__cart.is-busy { opacity: .6; cursor: progress; }
.bdt-bar__queuebtn { background: transparent; color: var(--bdt-cream, #FFFAD2); }
.bdt-bar__queuebtn:hover { background: rgba(255, 250, 210, .12); }
.bdt-bar__queuebtn .bdt-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  margin-left: 6px; border-radius: 999px; background: var(--bdt-pink, #F5B3C5); color: var(--bdt-ink, #312783);
  font-size: .72rem;
}

/* --------------------------------------------------------------------------
   Queue drawer
   -------------------------------------------------------------------------- */
#bdt-queue {
  max-height: min(52vh, 460px); overflow-y: auto;
  background: var(--bdt-ink-2, #241A63); border-top: 2px solid rgba(255, 250, 210, .18);
  padding: 10px 16px 16px;
}
#bdt-queue[hidden] { display: none; }
.bdt-queue__empty { max-width: 1200px; margin: 8px auto; opacity: .8; font-size: .9rem; }
.bdt-queue__rel { max-width: 1200px; margin: 0 auto; padding: 10px 0; border-bottom: 1px dotted rgba(255, 250, 210, .2); }
.bdt-queue__rel.is-current { }
.bdt-queue__relhead { display: flex; align-items: center; gap: 10px; }
.bdt-queue__cover { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: #fff; flex: 0 0 auto; }
.bdt-queue__title { flex: 1 1 auto; color: var(--bdt-white, #fff); font-family: var(--bdt-font-head, sans-serif); font-size: .92rem; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdt-queue__title:hover { color: var(--bdt-pink, #F5B3C5); }
.bdt-queue__remove { flex: 0 0 auto; background: transparent; border: 0; color: var(--bdt-cream, #FFFAD2); opacity: .7; cursor: pointer; font-size: .95rem; padding: 4px; }
.bdt-queue__remove:hover { opacity: 1; color: var(--bdt-pink, #F5B3C5); }
.bdt-queue__tracks { list-style: none; margin: 6px 0 0; padding: 0 0 0 44px; }
.bdt-queue__track {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; color: var(--bdt-cream, #FFFAD2);
  padding: 5px 8px; border-radius: 8px; font-size: .85rem;
}
.bdt-queue__track:hover { background: rgba(255, 250, 210, .1); }
.bdt-queue__track.is-playing { color: var(--bdt-pink, #F5B3C5); }
.bdt-queue__track .n { width: 18px; opacity: .6; font-variant-numeric: tabular-nums; }
.bdt-queue__track .t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdt-queue__track .len { opacity: .6; font-variant-numeric: tabular-nums; }

/* Toast. */
.bdt-toast {
  position: fixed; left: 50%; bottom: 104px; transform: translate(-50%, 12px); z-index: 70;
  background: var(--bdt-ink, #312783); color: var(--bdt-cream, #FFFAD2);
  border: 2px solid var(--bdt-cream, #FFFAD2); border-radius: 999px; padding: 10px 20px;
  font-family: var(--bdt-font-head, sans-serif); font-size: .85rem; box-shadow: var(--bdt-shadow-sm, 4px 4px 0 #312783);
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; max-width: 90vw;
}
.bdt-toast--show { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   On-release "Listen" panel (replaces the native MediaElement player)
   -------------------------------------------------------------------------- */
/* Hide the native WP playlist UI; player.js reads its JSON and drives the bar. */
.single-product .woocommerce-tabs .wp-playlist { display: none !important; }

.woocommerce div.product .bdt-player {
  grid-column: 2; grid-row: 1; align-self: start;
  background: var(--bdt-white, #fff);
  border: var(--bdt-outline, 3px) solid var(--bdt-ink, #312783);
  border-radius: var(--bdt-radius, 18px);
  padding: clamp(14px, 1.6vw, 20px);
}
.bdt-player__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bdt-player__label { font-family: var(--bdt-font-head, sans-serif); text-transform: uppercase; letter-spacing: .5px; color: var(--bdt-ink, #312783); }
.bdt-player__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bdt-player__btn {
  appearance: none; cursor: pointer; border-radius: 999px; border: 2px solid var(--bdt-ink, #312783);
  background: var(--bdt-cream, #FFFAD2); color: var(--bdt-ink, #312783);
  font-family: var(--bdt-font-head, sans-serif); text-transform: uppercase; letter-spacing: .5px;
  font-size: .78rem; padding: 9px 14px; transition: transform .12s ease, background .12s ease;
}
.bdt-player__btn:hover { transform: translateY(-1px); background: var(--bdt-white, #fff); }
.bdt-player__btn--add { background: var(--bdt-pink, #F5B3C5); }
.bdt-player__tracks { list-style: none; margin: 0; padding: 0; }
.bdt-player__track {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; color: var(--bdt-ink, #312783);
  padding: 8px 6px; border-radius: 10px; font-size: .92rem; border-bottom: 1px dotted rgba(49, 39, 131, .2);
}
.bdt-player__track:last-child { border-bottom: 0; }
.bdt-player__track:hover { background: rgba(34, 184, 197, .12); }
.bdt-player__track .n { width: 20px; opacity: .55; font-variant-numeric: tabular-nums; }
.bdt-player__track .t { flex: 1 1 auto; }
.bdt-player__track .len { opacity: .55; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Responsive: collapse the bar on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .bdt-bar__inner { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; }
  .bdt-bar__seek { order: 5; flex: 1 1 100%; max-width: none; }
  .bdt-bar__meta { flex: 1 1 40%; }
  .bdt-bar__queuebtn { padding: 8px 12px; }
}

/* A faint progress cue on the whole page while a PJAX swap is in flight. */
html.bdt-navigating { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .bdt-bar__transport button, .bdt-player__btn, .bdt-toast { transition: none; }
}