/**
 * ═══════════════════════════════════════════════════════════════════
 *  PREVIEW MEDITATIONS — стили для контролов громкости
 * ═══════════════════════════════════════════════════════════════════
 */

/* Контейнер громкости внутри media-card */
.media-volume {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Показываем контролы при наведении или когда трек играет */
.media-card:hover .media-volume,
.media-card.playing .media-volume {
  opacity: 1;
}

/* Всегда показываем на мобильных */
@media (max-width: 768px) {
  .media-volume {
    opacity: 1;
  }
}

/* Слайдер громкости */
.media-volume .vol-slider {
  flex: 1;
  height: 14px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  position: relative;
}

/* Трек слайдера */
.media-volume .vol-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--pct, 80%),
    rgba(200, 149, 108, 0.2) var(--pct, 80%),
    rgba(200, 149, 108, 0.2) 100%
  );
  border-radius: 2px;
  transition: background 0.15s ease;
  position: relative;
}

.media-volume .vol-slider::-moz-range-track {
  width: 100%;
  height: 4px;
  background: rgba(200, 149, 108, 0.2);
  border-radius: 2px;
  position: relative;
}

.media-volume .vol-slider::-moz-range-progress {
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
}

/* Ползунок */
.media-volume .vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: -5px; /* (14px - 4px) / 2 = 5px для центрирования */
}

.media-volume .vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover эффекты для ползунка */
.media-volume .vol-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 3px 10px rgba(200, 149, 108, 0.4);
}

.media-volume .vol-slider:hover::-moz-range-thumb {
  transform: scale(1.2);
  box-shadow: 0 3px 10px rgba(200, 149, 108, 0.4);
}

/* Активное состояние ползунка */
.media-volume .vol-slider:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

.media-volume .vol-slider:active::-moz-range-thumb {
  transform: scale(1.1);
}

/* Значение громкости */
.media-volume .vol-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* Кнопка play с анимацией при проигрывании */
.media-card.playing .media-play {
  background: var(--accent);
  border-color: var(--accent);
}

.media-card.playing .media-play svg {
  stroke: #fff;
}

/* Пульсация при проигрывании */
@keyframes playPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200, 149, 108, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(200, 149, 108, 0);
  }
}

.media-card.playing .media-play {
  animation: playPulse 2s ease-in-out infinite;
}