/* Bespoke Jukebox - follows the theme's fonts; the accent can be changed with --bj-accent. */
.bj-jukebox {
  --bj-accent: #00a3d9;
  --bj-accent-ink: #ffffff;
  --bj-line: rgba(127, 127, 127, 0.25);
  --bj-soft: rgba(127, 127, 127, 0.08);
  max-width: 820px;
  margin: 0 auto 2em;
  color: var(--bj-text, inherit);
  font-family: var(--bj-font, inherit);
  font-size: var(--bj-size, inherit);
  background: var(--bj-bg, transparent);
}
.bj-jukebox.bj-has-bg { padding: 1.2em 1.4em; border-radius: calc(var(--bj-radius, 6px) * 1.5); }
.bj-jukebox .bj-title {
  margin: 0 0 0.6em;
  color: var(--bj-title-color, inherit);
  font-family: var(--bj-title-font, var(--bj-font, inherit));
}
.bj-jukebox[style*="--bj-title-size"] .bj-title { font-size: var(--bj-title-size); }
/* Some themes give headings a very tight line height (lines overlap when the title wraps) - keep ours readable. */
.bj-jukebox .bj-title {
  line-height: 1.2 !important;
  letter-spacing: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  height: auto !important;
  white-space: normal !important;
  position: static !important;
  padding: 0 !important;
}
.bj-jukebox .bj-title::before, .bj-jukebox .bj-title::after { display: none !important; }
@media (max-width: 600px) {
  .bj-jukebox .bj-title { font-size: min(var(--bj-title-size, 1.8em), 8vw) !important; margin-bottom: 0.5em; }
  .bj-jukebox.bj-has-bg { padding: 1em 0.9em; }
  .bj-now { font-size: 0.95em; }
  .bj-now-song { line-height: 1.3; }
  .bj-search { flex-wrap: wrap; }
  .bj-search input { flex-basis: 100%; }
  .bj-search .bj-btn { width: 100%; }
  .bj-song-title, .bj-song-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .bj-song .bj-btn { font-size: 0.85em; }
}
.bj-jukebox button, .bj-jukebox input, .bj-jukebox textarea { font-family: inherit; }
.bj-now { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; margin-bottom: 0.8em; }
.bj-now-label {
  background: #c8102e; color: #fff; font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.2em 0.6em; border-radius: 3px; text-transform: uppercase;
}
.bj-now-song { font-weight: 600; }
.bj-closed { width: 100%; padding: 0.6em 0.8em; background: var(--bj-soft); border-radius: var(--bj-radius, 6px); font-size: 0.95em; }
.bj-search { display: flex; gap: 0.5em; margin-bottom: 0.6em; }
.bj-search input { flex: 1; min-width: 0; padding: 0.6em 0.8em; border: 1px solid var(--bj-line); border-radius: var(--bj-radius, 6px); font: inherit; }
.bj-btn {
  background: var(--bj-accent); color: var(--bj-accent-ink); border: 0; border-radius: var(--bj-radius, 6px);
  padding: 0.55em 1em; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.bj-btn:hover { filter: brightness(1.08); }
.bj-btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.bj-ghost { background: transparent; color: inherit; border: 1px solid var(--bj-line); }
.bj-letters { display: flex; flex-wrap: wrap; gap: 0.25em; margin-bottom: 0.8em; }
.bj-letter {
  min-width: 2em; padding: 0.3em 0.4em; border: 1px solid var(--bj-line); border-radius: calc(var(--bj-radius, 6px) * 0.7);
  background: transparent; color: inherit; font: inherit; font-size: 0.9em; cursor: pointer;
}
.bj-letter.bj-active, .bj-letter:hover { background: var(--bj-accent); border-color: var(--bj-accent); color: var(--bj-accent-ink); }
.bj-info { font-size: 0.9em; opacity: 0.75; margin-bottom: 0.4em; }
.bj-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bj-line); }
.bj-song { display: flex; align-items: center; gap: 1em; padding: 0.65em 0.4em; border-bottom: 1px solid var(--bj-line); margin: 0; background: var(--bj-row-bg, transparent); }
.bj-song-text { flex: 1; min-width: 0; }
.bj-cover {
  flex: 0 0 var(--bj-cover, 56px); width: var(--bj-cover, 56px); height: var(--bj-cover, 56px); border-radius: var(--bj-radius, 6px); overflow: hidden; background: var(--bj-soft);
  position: relative;
}
.bj-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bj-cover img.bj-cover-logo { object-fit: contain; padding: 12%; box-sizing: border-box; }
.bj-cover-none::after {
  content: "\266A"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.5em; opacity: 0.35;
}
.bj-song-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-song-meta { font-size: 0.88em; color: var(--bj-muted, inherit); opacity: var(--bj-muted-opacity, 0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-form { padding: 0.9em; margin: 0.4em 0 0.6em; background: var(--bj-soft); border-radius: calc(var(--bj-radius, 6px) * 1.3); display: grid; gap: 0.5em; }
.bj-form-head { font-weight: 600; }
.bj-form input, .bj-form textarea { width: 100%; box-sizing: border-box; padding: 0.55em 0.7em; border: 1px solid var(--bj-line); border-radius: var(--bj-radius, 6px); font: inherit; }
.bj-form-actions { display: flex; gap: 0.5em; }
.bj-note { font-size: 0.9em; }
.bj-thanks { font-weight: 600; }
.bj-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.bj-pager { display: flex; align-items: center; justify-content: center; gap: 1em; margin-top: 1em; }
.bj-page { font-size: 0.9em; opacity: 0.8; }
@media (max-width: 520px) {
  .bj-song { gap: 0.6em; }
  .bj-cover { flex-basis: calc(var(--bj-cover, 56px) * 0.8); width: calc(var(--bj-cover, 56px) * 0.8); height: calc(var(--bj-cover, 56px) * 0.8); }
  .bj-btn { padding: 0.5em 0.75em; }
}