/* Back Lot Music — track preview buttons (white-on-black tracklist)
 * Selectors are deliberately heavy (.blm-track button.blm-tp-btn) and the box
 * properties use !important: Elementor's global button styles
 * (.elementor-kit-N button { color:#000; border-radius:50px; padding:15px 50px }
 *  + black background on hover) and Bootstrap's button reset otherwise win. */

.blm-track button.blm-tp-btn,
.blm-track button.blm-tp-btn:hover,
.blm-track button.blm-tp-btn:focus,
.blm-track button.blm-tp-btn:active {
  all: unset;                                   /* drop every inherited/global button style first */
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 none transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, opacity .15s ease !important;
  overflow: visible !important;
}
.blm-track button.blm-tp-btn:hover { transform: scale(1.06) !important; }
.blm-track button.blm-tp-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }

.blm-track .blm-tp-ring { position: absolute; inset: 0; pointer-events: none; }
.blm-track .blm-tp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.blm-track .blm-tp-track { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.blm-track .blm-tp-progress { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.blm-track .blm-tp-icon { position: relative; display: block; }
/* play triangle */
.blm-track .blm-tp-icon-play { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
/* pause bars */
.blm-track .blm-tp-icon-pause { display: none; width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; box-sizing: border-box; }
.blm-track .blm-tp-btn.is-playing .blm-tp-icon-play,
.blm-track .blm-tp-btn.is-loading .blm-tp-icon-play { display: none; }
.blm-track .blm-tp-btn.is-playing .blm-tp-icon-pause { display: block; }
.blm-track .blm-tp-btn.is-loading .blm-tp-track { stroke: rgba(255,255,255,.15); }
.blm-track .blm-tp-btn.is-loading .blm-tp-ring svg { animation: blm-tp-spin .9s linear infinite; }
.blm-track .blm-tp-btn.is-loading .blm-tp-progress { stroke-dashoffset: 75 !important; }
.blm-track button.blm-tp-btn.is-error { opacity: .35 !important; cursor: default !important; }
.blm-track.blm-tp-row-active strong { text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); }
@keyframes blm-tp-spin { to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) {
  .blm-track button.blm-tp-btn, .blm-track .blm-tp-progress { transition: none !important; }
  .blm-track .blm-tp-btn.is-loading .blm-tp-ring svg { animation: none; }
}