/* === ساختار اصلی === */
.alo-music-slider {
  max-width: 1080px !important;
  padding-bottom: 35px !important;
  padding-top: 15px !important;
  box-sizing: border-box !important;
  direction: rtl !important;
}

.alo-music-slide {
  width: 100% !important;
  max-width: 420px !important;
  background: var(--color-background-light) !important;
  border-radius: 20px !important;
  box-shadow: 0px 7px 14px 4px var(--color-shadow) !important;
  padding: 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* === کاور === */
.alo-cover {
  width: 100% !important;
  height: 350px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 18px !important;
  position: relative !important;
  box-shadow: 0px 7px 14px 4px var(--color-shadow) !important;
  overflow: hidden !important;
}

.alo-music-title {
  text-align: center !important;
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 12px !important;
  background: rgba(247, 243, 232, 0.6) !important;
  color: var(--color-primary) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
  border-radius: 10px !important;
  margin-bottom: 0px !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* === کنترل‌ها === */
.alo-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.alo-btn {
  border: none !important;
  background: var(--color-secondary) !important;
  color: var(--color-primary) !important;
  box-shadow: 0px 7px 14px 4px var(--color-shadow) !important;
  padding: 10px 14px !important;
  border-radius: 50px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.3s ease !important;
}

.alo-btn:hover {
  background: var(--color-primary) !important;
  color: var(--color-accent) !important;
  transform: scale(1.05) !important;
}

/* === نوار پیشرفت === */
.alo-progress-container {
  direction: ltr !important;
  width: 90% !important;
  max-width: 380px !important;
  height: 8px !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
  margin: 15px auto 5px auto !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.alo-progress-bar {
  height: 100% !important;
  width: 0%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)) !important;
  transition: width 0.2s linear !important;
}

/* === دکمه دانلود === */
.alo-download {
  margin-top: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.alo-download:hover {
  background: var(--color-primary) !important;
  color: var(--color-text-on-dark) !important;
  border: none;
}

/* === واکنش‌گرا === */
@media (max-width: 600px) {
  .alo-music-slide {
    max-width: 320px !important;
  }

  .alo-cover {
    height: 250px !important;
  }

  .alo-btn span {
    display: none !important;
  }

  .alo-btn {
    font-size: 14px !important;
    padding: 8px 10px !important;
  }
}

/* === Mini Player شناور (کوچکتر و جمع و جورتر) === */
.alo-mini-player {
  position: fixed !important;
  bottom: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(150%) !important;
  background: var(--color-background-light) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  box-shadow: 0 6px 18px var(--color-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 220px !important;
  z-index: 9999;
  opacity: 0;
  transition: all 0.35s ease;
  pointer-events: auto;
}
.alo-mini-player.active {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1;
}

/* info */
.alo-mini-info { display:flex !important; align-items:center !important; gap:8px !important; }
.alo-mini-cover { width:38px !important; height:38px !important; border-radius:8px !important; object-fit:cover !important; }
.alo-mini-title { font-size:13px !important; font-weight:600 !important; color:var(--color-primary) !important; max-width:120px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }

/* controls (آیکون‌ها کوچک‌تر) */
.alo-mini-controls { display:flex !important; align-items:center !important; gap:6px !important; }
.alo-mini-controls button {
  border: none !important;
  width: 30px !important;
  font-size: 14px !important;
  padding: 2px;
  cursor: pointer !important;
  border-radius: 6px !important;
  box-shadow: 0px 4px 12px 2px var(--color-shadow) !important;
  transition: all 0.3s ease !important;
}
.alo-mini-controls button:hover { transform: scale(1.05) !important; }

.alo-mini-controls .alo-mini-prev,
.alo-mini-controls .alo-mini-toggle,
.alo-mini-controls .alo-mini-next {
  background: var(--color-secondary) !important;
  color: var(--color-primary) !important;
}

.alo-mini-controls .alo-mini-prev:hover,
.alo-mini-controls .alo-mini-toggle:hover,
.alo-mini-controls .alo-mini-next:hover {
  color: var(--color-secondary) !important;
  background-color: var(--color-primary) !important;
}

/* close button (قرمز کوچک) */
.alo-mini-close {
  background: var(--color-alarm) !important;
  color: var(--color-background-light) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.alo-mini-close:hover { background-color: var(--color-background-light) !important; color: var(--color-alarm) !important;}

/* کم‌کردن اندازه آیکون‌ها عمومی برای دکمه‌های داخل اسلاید */
.alo-btn i, .alo-play-btn i { font-size: 14px !important; }
.alo-btn span, .alo-play-btn span { font-size: 13px !important; }

/* اطمینان از اینکه tooltip مرورگر نمایش داده می‌شود */
.alo-play-btn[title], .alo-btn[title], .alo-mini-controls button[title] { cursor: pointer; }