/* ============================================================
   Контейнер плеера
   ============================================================ */

.flying-player {
  position: fixed;
  bottom: 1rem;
  left: 3rem;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* было center — при fit-content это не важно, но логичнее */
  gap: 0.5rem;
  /* расстояние между .kp-player и кнопкой «Эфир» */
  z-index: 9999;
  overflow: visible;
  /* важно для мини-окна */
}

/* ============================================================
   Плеер — ОДНО правило вместо двух
   ============================================================ */

.kp-player {
  position: relative;
  box-shadow: var(--k24-box-shadow);
  width: auto;
  /* было 100% во втором правиле — убрали */
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--k24-gradient-base);
  border-radius: var(--k24-border-radius-2xl, 12px);
  padding: 0.25rem 1rem 0.25rem 0;
  /* добавили горизонтальные отступы */
  box-sizing: border-box;
}

/* ============================================================
   Логотип
   ============================================================ */

.kp-player-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
  overflow: hidden;
}

.kp-player-logo img {
  height: 4.1rem;
  width: 4.1rem;
  background: var(--k24-light-reverse);
  border-radius: 50%;
  padding: 0.25rem;
  transition: filter 0.2s ease;
}

.kp-player-logo.is-playing img {
  animation: kp-spin 3s linear infinite;
}

.kp-player-logo.is-loading img {
  filter: brightness(0.7);
}

@keyframes kp-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kp-player-logo.is-playing img {
    animation: none;
  }
}

.kp-player-name {
  color: var(--k24-light-reverse);
  text-align: center;
  font-weight: var(--k24-font-weight-medium);
}

/* ============================================================
   Кнопки
   ============================================================ */

.kp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--k24-light-reverse);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}

.kp-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.kp-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.kp-btn.is-loading .kp-icon-play,
.kp-btn.is-loading .kp-icon-pause {
  display: none !important;
}

.kp-btn.is-loading .kp-icon-loading {
  display: block !important;
}

.kp-btn svg {
  width: 2rem;
  height: 2rem;
  fill: var(--k24-light-reverse);
  transition: var(--k24-transition-base);
}

.kp-btn:hover svg {
  fill: var(--k24-red);
  transition: var(--k24-transition-base);
}

/* ============================================================
   Регулятор громкости
   ============================================================ */

#kp-volume {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block;
  flex: 0 0 auto;
  /* фиксированная ширина, не растягивается */
  width: 5rem;
  min-width: 4rem;
  height: 1.25rem;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
}

#kp-volume::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}

#kp-volume::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}

#kp-volume::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: #fff;
}

#kp-volume::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease;
}

#kp-volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease;
}

#kp-volume:hover::-webkit-slider-thumb,
#kp-volume:focus-visible::-webkit-slider-thumb,
#kp-volume:hover::-moz-range-thumb,
#kp-volume:focus-visible::-moz-range-thumb {
  transform: scale(1.15);
}

#kp-volume:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

#kp-volume::-webkit-slider-thumb:active {
  transform: scale(1.05);
}