.audio-table-header .plyr {
  --plyr-color-main: #ca1f32; /* played portion color */
  background: transparent;
  margin: 6px 0 14px;
}
.audio-table-header .plyr--audio .plyr__controls {
  background: transparent;
  padding: 0;
  gap: 12px;
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-left: 15px;
}

.audio-table-header .plyr--audio .plyr__controls [data-plyr="play"] {
  width: 28px;
  height: 28px;
  background: #b30000;
  color: #fff;                 /* glyph color */
  border-radius: 3px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.audio-table-header .plyr--audio .plyr__controls [data-plyr="play"] svg {
  display: none !important;
}
.audio-table-header .plyr--paused  .plyr__controls [data-plyr="play"]::before {
  content: '▶';                 /* play */
  font-size: 16px;
}
.audio-table-header .plyr--playing .plyr__controls [data-plyr="play"]::before {
  content: '❚❚';               /* pause */
  font-size: 16px;
}

.audio-table-header .plyr--audio .plyr__progress {
  width: 100%;                 /* adjust to taste */
  min-width: 220px;
}

.audio-table-header .plyr--audio .plyr__progress input[type='range'] {
  --plyr-range-thumb-height: 0px;   /* hide knob */
  --plyr-range-track-height: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 2px;
}

.audio-table-header .plyr--audio .plyr__progress__buffer {
  background: #ccc !important;
  opacity: 1 !important;
  height: 15px;
}

.audio-table-header .plyr--audio .plyr__progress__played {
  background: #ca1f32 !important;
  height: 15px;
}

.audio-table-header .plyr--audio .plyr__time {
  color: #000;
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  margin-left: 6px;
}

.audio-table-header .plyr--audio .plyr__controls [data-plyr="play"]::before {
  display: inline-block;
}


.audio-table-header .plyr {
    margin-top: 0px;
    margin-bottom: 0px;
/*    width: 90%;*/
}

.audio-table-header .plyr--audio .plyr__progress__buffer {
  display: none !important;
}

/* Reorder Plyr controls: Progress | Play | Time */
.plyr--audio .plyr__controls {
  display: flex;
  align-items: center;
  gap: 10px;               /* space between items */
}

/* Make the progress bar take up the remaining width */
.plyr--audio .plyr__progress__container {
  order: 1;
  flex: 1 1 auto;
  min-width: 120px;
}

/* Move play button to the right of the progress bar */
.plyr--audio .plyr__control[data-plyr="play"] {
  order: 2;
  flex: 0 0 auto;
  margin: 0;               /* remove odd default spacing */
}

/* Times after the play button */
.plyr--audio .plyr__time--current {
  order: 3;
  flex: 0 0 auto;
}

.plyr--audio .plyr__time--duration {
  order: 4;
  flex: 0 0 auto;
}

/* Optional: remove extra left space before duration */
.plyr--audio .plyr__time--duration {
  margin-left: 0;
}

.plyr--audio .plyr__time + .plyr__time::before {
  margin: 0 1px !important;
}

.plyr--audio .plyr__time {
  min-width: 0 !important;
  width: auto !important;
  padding: 0 2px !important;
  margin: 0 !important;
}

/* 1) Remove the global gap (this is what creates the huge space between the two time elements) */
.audio-table-header .plyr--audio .plyr__controls {
  gap: 0 !important;
}

/* 2) Add spacing only between the main “blocks” */
.audio-table-header .plyr--audio .plyr__progress__container {
  margin-right: 12px; /* space between bar and play button */
}

.audio-table-header .plyr--audio .plyr__control[data-plyr="play"] {
  margin-right: 10px; /* space between play button and time */
}

/* 3) Now you can control the slash spacing tightly */
.audio-table-header .plyr--audio .plyr__time--duration::before {
  margin: 0 2px !important; /* space around "/" */
}

/* Remove all spacing from the two time blocks themselves */
.audio-table-header .plyr--audio .plyr__time {
  margin: 0 !important;
  padding: 0 !important;
  min-width: auto !important;
  width: auto !important;
}

/* Control spacing ONLY via the slash */
.audio-table-header .plyr--audio .plyr__time--duration::before {
  content: "/" !important;
  margin: 0 3px !important;  /* ← this is now the ONLY spacing */
}

/* Make the header a flex row */
.audio-table-header {
  display: flex;
  align-items: center;        /* keeps player aligned with multi-line title */
  gap: 12px;
}

/* Let the title wrap without pushing the player down */
.audio-table-header h4 {
  flex: 1 1 auto;
  min-width: 0;               /* CRITICAL: allows wrapping */
  margin: 0;
}

/* Keep Plyr on the right */
.audio-table-header .plyr {
  flex: 0 0 auto;
  margin: 0;
  width: auto;
}

/* Kill float + fixed width (the real culprits) */
.audio-table-header .plyr--audio .plyr__controls {
  float: none !important;
  width: auto !important;
  padding-top: 0;
  padding-left: 0;
}

/* 2-row header: title on top, player underneath */
.audio-table-header {
  display: block !important;
}

/* Title always takes full width */
.audio-table-header h4 {
  display: block;
  margin: 0;
}

/* Plyr sits under the title, still inside the header box */
.audio-table-header .plyr {
  display: block;
  margin: 6px 0 0;   /* space between title and player */
  width: 100% !important;
}

/* Kill the float + fixed width that cause the controls to reflow weirdly */
.audio-table-header .plyr--audio .plyr__controls {
  float: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-top: 8px;          /* adjust to taste */
  box-sizing: border-box;
}

/* Reserve space for the trigger so the title never sits under it */
.audio-title .audio-table-header {
  position: relative;
  padding-left: 34px;   /* adjust if your trigger column is wider */
}

/* Keep the trigger in its own reserved area */
.audio-title .audio-table-header > a.trigger {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;          /* must match padding-left above */
  height: 100%;
}

.audio-title .audio-table-header .plyr {
  width: 820px;        /* your old width, tweak as desired */
  max-width: 100%;
  margin-top: 6px;
}

.audio-title .audio-table-header .plyr--audio .plyr__controls {
  float: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  box-sizing: border-box;
}

.audio-title .audio-table-header {
  position: relative;
  padding-left: 42px; 
}

.audio-title .audio-table-header > a.trigger {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 100%;
  z-index: 2;        
}

.audio-title .audio-table-header .plyr {
  width: 800px;       
  max-width: 100%;
  margin-top: 6px;
  margin-left: auto;  
}

.audio-title .audio-table-header .plyr--audio .plyr__controls {
  float: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  box-sizing: border-box;
}

.audio-title .audio-table-header {
  overflow: hidden;     
  height: auto;
  padding-bottom: 10px; 
}

.audio-title .audio-table-header {
  padding-left: 42px;   /* 34px trigger + 8px */
}

.audio-title .audio-table-header .plyr {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 800px;        
  max-width: 100%;
  margin-top: 6px;
  margin-left: auto;   

.audio-title .audio-table-header .plyr__controls {
  padding-left: 0 !important;
}

.audio-title .audio-table-header .plyr__progress__container {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.audio-title .audio-table-header .plyr--audio .plyr__controls {
  padding-left: 0 !important;
}

.audio-title .audio-table-header .plyr__progress__container {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.audio-title .audio-table-header .plyr__progress {
  margin-left: -6px;    

.audio-player {
  display: none;
}