.wbav-player { max-width: 840px; margin: 1rem auto; --wbav-scrollbar-thumb: #2E6FBF; --wbav-scrollbar-track: #10141b; }

.wbav-player.is-inside { max-width: none; margin: 0; width: 100%; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }

.wbav-player.is-playing .wbav-play .wbav-icon-play { display: none; }

.wbav-player.is-playing .wbav-play .wbav-icon-pause { display: inline-block; }

.wbav-audio-wrap { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }

/* overlay styling removed per request */

.wbav-controls { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }

.wbav-controls { justify-content: center; }

.wbav-controls button { appearance: none; -webkit-appearance: none; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.5); color: #fff; border-radius: 999px; padding: .5rem .75rem; line-height: 1; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }

.wbav-controls button:hover { background: rgba(0,0,0,.65); }

.wbav-controls button:focus { outline: 2px solid #2E6FBF; outline-offset: 2px; }

.wbav-active-title { text-align: center; font-weight: 600; margin-top: .5rem; }
.wbav-active-genre { margin-left: .5rem; font-size: .7em; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.wbav-active-genre:empty { display: none; }

.wbav-list { margin: 20px 0; padding: 0 0 0 14px; list-style-type: none; 
    max-height: 500px;
	overflow-y: auto;
	width:100%;
  scrollbar-width: thin;
  scrollbar-color: var(--wbav-scrollbar-thumb, #2E6FBF) var(--wbav-scrollbar-track, #10141b);
}
.wbav-list li {  padding: 4px 8px;
  text-align:left;
  transition: background-color .2s ease;}
.wbav-list li:hover { background-color: rgba(255,255,255,0.1);}
.wbav-list.is-two-col { padding-left: 0; max-height: none; overflow: visible; width: 100%; box-sizing: border-box; column-count: 1; column-gap: 0; }
.wbav-list.is-two-col .wbav-item { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: 4px; text-align: left; width: 100%; break-inside: avoid; }
.wbav-list.is-two-col .wbav-item-title { text-align: left; }
.wbav-list.is-two-col .wbav-item-index { text-align: left; }

/* Explicitly remove any inherited height/overflow caps when using two columns */
.wbav-player .wbav-list.is-two-col { max-height: none !important; overflow: visible !important; }
.wbav-player .wbav-list.is-max-height-disabled { max-height: none; overflow: visible; }

.wbav-list.has-numbers { padding-left: 0; }
.wbav-list.has-numbers .wbav-item { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; text-align: left; }
.wbav-item-index { min-width: 2.5ch; opacity: .75; font-variant-numeric: tabular-nums; text-align: right; }
.wbav-list.has-numbers .wbav-item-title { text-align: left; }
.wbav-list.is-two-col.has-numbers .wbav-item { justify-content: flex-start; text-align: left; }
.wbav-list.is-two-col.has-numbers .wbav-item-title { text-align: left; }
.wbav-list.is-two-col.has-numbers .wbav-item-index { text-align: left; }

.wbav-item { cursor: pointer; display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.wbav-item-title { flex: 1; text-align: left; }
.wbav-item-genre { margin-left: .5rem; font-size: .75em; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.wbav-item-duration { min-width: 4.5ch; text-align: right; opacity: .85; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); }
.wbav-item.is-active {  background-color: rgba(255,255,255,0.1); }
.wbav-list::-webkit-scrollbar { width: 8px; }
.wbav-list::-webkit-scrollbar-track { background: var(--wbav-scrollbar-track, #10141b); border-radius: 999px; }
.wbav-list::-webkit-scrollbar-thumb { background: var(--wbav-scrollbar-thumb, #2E6FBF); border-radius: 999px; }


/* Background video holder and video */

.wbav-bg-video-holder { position: relative; overflow: hidden; }

.wbav-bg-video { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; z-index: 0; }



/* Make the native audio element expand (especially useful with debug controls) */

.wbav-audio { width: 100%; display: block; }



/* Waveform container */

.wbav-wave { width: 100%; height: 80px; }



/* Icons and accessibility */

.wbav-icon { width: 20px; height: 20px; display: inline-block; }

.wbav-play .wbav-icon-pause { display: none; }

.wbav-visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }



/* Mobile tweaks */
@media (max-width: 640px){
  /* compact spacing on small screens */
  .wbav-controls { gap: .4rem; }
  .wbav-controls button { padding: .5rem .6rem; }
  .wbav-wave { height: 64px; }
  .wbav-list.is-two-col .wbav-item { text-align: left; justify-content: flex-start; }
}

/* Switch to two columns on wider viewports; mobile defaults to one column */
@media (min-width: 900px){
  .wbav-list.is-two-col { column-count: 2; column-gap: 28px; }
}