/* ==============================
   Кнопки серверов (верх)
============================== */
.ts-server-switch{
  display:flex; gap:10px; align-items:center;
  margin: 0 0 14px 0;
  flex-wrap: wrap;
}
.ts-server-btn{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.04);
  color: inherit;
  font-weight: 600;
  line-height: 1;
  transition: transform .05s ease, background .15s ease;
}
.ts-server-btn:focus{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}
.ts-server-btn:active{ transform: translateY(1px); }
.ts-server-btn.is-active{
  background: rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.35);
}

/* ==============================
   Заголовок трека (вместо #data-name)
============================== */
#data-name,
.ts-data-name{
  font-family: "Frank-Light", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 2px;
}
.ts-data-name span{ color: #ff4e00; }

/* ==============================
   Hover/focus (Elementor selector -> ts-playlist)
============================== */
.ts-playlist [type="button"]:focus,
.ts-playlist [type="button"]:hover,
.ts-playlist button:focus,
.ts-playlist button:hover{
  background-color: #c360;
}

/* ==============================
   Player background (как было)
============================== */
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body{
  background: #efefef !important;
}
.mejs-time{ color: #888888 !important; }
.mejs-time .mejs-currenttime,
.mejs-time .mejs-duration,
span.mejs-currenttime,
span.mejs-duration{
  color: #ff4e00 !important;
}


/* Progress/volume backgrounds */
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-time-rail .mejs-time-total{
  background-color: #fff !important;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded{
  background-color: rgba(219, 78, 136, 0.075) !important;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mejs-controls .mejs-time-rail .mejs-time-current{
  background: #ff4e00 !important;
}

/* Reduce height of progress bars */
.mejs-time-current,
.mejs-time-float,
.mejs-time-float-corner,
.mejs-time-float-current,
.mejs-time-hovered,
.mejs-time-loaded,
.mejs-time-marker,
.mejs-time-total,
.mejs-horizontal-volume-total,
.mejs-time-handle-content{
  height: 3px !important;
}
.mejs-time-float{
  border: none !important;
  bottom: 6px !important;
}
.mejs-time-float-corner{ display: none !important; }
.mejs-time-handle-content{ top: -6px !important; }
.mejs-time-total{ margin-top: 8px !important; }
.mejs-horizontal-volume-total{ top: 19px !important; }

.mejs-time-buffering::before{
  content: "Загрузка...";
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: #515151;
}

/* ==============================
   Твои адаптивные правила (как было)
============================== */

/* Phone portrait (less than 480px) */
@media only screen and (max-width: 479px){
  .mejs-controls.ctbt{ margin-top: 0px; }
  .wp-audio-shortcode{ margin-bottom: 4px; }
  .playback-speed-btn{
    margin-left: 5px !important;
    margin-right: 5px !important;
    font-size: 14px !important;
  }
  .ctbt .mejs-button{ width: 16.9vw !important; }
  .mejs-controls.ctbt.ts-has-download .mejs-button{ width: 13.9vw !important; }
  .mejs-time.mejs-currenttime-container{ padding-left: 0px !important; }
  .mejs-button.mejs-playpause-button.mejs-pause,
  .mejs-button.mejs-playpause-button.mejs-play{ margin-left: 0px !important; }
}

/* Tablet portrait (less than 768px) */
@media only screen and (min-width: 480px) and (max-width: 767px){
  .mejs-controls.ctbt{ margin-top: -40px; }
  .ctbt .mejs-button{ width: 38px !important; }
}

/* Desktop (greater than or equal to 767px) */
@media only screen and (min-width: 767px){
  .mejs-controls.ctbt{ margin-top: -40px; }
  .ctbt .mejs-button{ width: 38px !important; }
}

.playback-speed-btn{ font-size: 14px !important; }
.mejs-time.mejs-currenttime-container{ padding-left: 200px; }

/* ==============================
   КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ (скрин 1 -> скрин 2):
   Убираем "серые кнопки" и возвращаем чистый вид:
   - прозрачный фон
   - без рамок
   - без внутренних паддингов/скруглений
   - скорость как текст
============================== */
.mejs-controls.ctbt{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: nowrap;
  background: transparent !important;
  border: 0 !important;
}

.mejs-controls.ctbt .audio-player-controls{
  display:flex;
  gap: 8px;
  align-items:center;
}

/* Сами кнопки — чистые, как было раньше */
.ctbt .mejs-button{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}

/* Чтобы кликабельная зона сохранялась и на телефоне/планшете */
.ctbt .mejs-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Спаны иконок — не трогаем графику, только размер/выравнивание */
.ctbt .mejs-button .arrow-icon{
  display:inline-block;
  width: 24px;
  height: 24px;
}

/* Кнопка скорости — “текстом”, без плашки */
.playback-speed-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: auto !important;
  font-weight: 400;
  color: #111;
}

.ts-download{
  text-decoration: none !important;
  color: inherit;
}

.ts-download .arrow-icon.download svg{
  width: 20px;
  height: 20px;
  display: block;
  fill: #000 !important;
}

@media only screen and (min-width: 767px){
  .mejs-controls.ctbt.ts-has-download .mejs-button{
    width: 27px !important;
  }
}