/* 🎵 استایل هماهنگ با قالب تیره و ظاهر مشابه Firefox */

.asp-player-wrapper {
  max-width: 600px;
  margin: 25px auto;
  text-align: center;
  background: #2d2d2d; /* رنگ کمی روشن‌تر از سبد خرید */
  padding: 15px 18px;
  border-radius: 8px;
  border: 1px solid #3a3a3a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.asp-player-title {
  font-weight: 600;
  color: #f3f3f3;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

/* 🎧 استایل پلیر */
.asp-player-wrapper audio {
  width: 100%;
  background-color: #1e1e1e;
  border-radius: 4px;
  height: 36px;
  color-scheme: dark; /* برای تطبیق آیکون‌ها در مرورگر */
  outline: none;
}

/* ✅ استایل مخصوص Chrome/Edge/Safari */
audio::-webkit-media-controls-panel {
  background-color: #1e1e1e !important;
  border-radius: 4px !important;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-timeline {
  filter: brightness(1.2) !important;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #e0e0e0 !important;
}

/* در فایرفاکس به‌صورت خودکار هماهنگ است */
audio {
  background-color: #1e1e1e;
  color-scheme: dark;
}

/* 📱 موبایل */
@media (max-width: 600px) {
  .asp-player-wrapper {
    margin: 15px auto;
    padding: 10px;
    background: #2d2d2d;
  }
  .asp-player-title {
    font-size: 1rem;
  }
}
/* ====== Pulse Effect while playing ====== */
.asp-player-wrapper.playing {
  animation: pulseEffect 2.5s infinite;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

@keyframes pulseEffect {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  }
}
.asp-player-wrapper, .asp-player-wrapper * {
  direction: ltr;
  box-sizing: border-box;
}