/* Shared app styles: song/video/player specific plus any fragment-level rules */
/* Basic page and container rules (layout already has many, but include fragment-specific here) */

/* Song / Video page */
.song-main {
  flex-grow: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 2rem 1.5rem 5rem;
}
.song-main a, .player-container a, .download-btn { text-decoration: none; color: inherit; }
.download-btn { display:inline-block; }
.song-title { font-size: 1.6rem; margin-bottom: 1rem; text-align:center; }
.cover-art-wrapper { width: 100%; max-width: 640px; position: relative; }
.cover-art { width: 100%; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.video-player { width: 100%; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); margin-bottom: 1rem; }
.song-description { font-size: 1rem; color: #b3b3b3; margin-bottom: 1rem; }
.song-meta { font-size: 0.9rem; color: #aaa; margin-bottom: 1rem; }
.download-btn { padding: 0.5rem 1rem; background: #1db954; color: #fff; border-radius: 6px; font-weight: 600; transition: background 0.3s ease; }
.download-btn:hover { background: #1ed760; }

/* Preparing download state: small spinner shown inside the button */
.download-btn.is-preparing { position: relative; pointer-events: none; opacity: 0.9; padding-right: 2.4rem; }
.download-btn.is-preparing::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: download-spin 0.8s linear infinite;
}

@keyframes download-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Full-page download overlay (centered spinner + label) */
#download-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 1200;
}
#download-overlay .download-overlay-box {
  background: rgba(18,18,18,0.95);
  padding: 18px 22px;
  border-radius: 12px;
  display:flex;
  gap:12px;
  align-items:center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
#download-overlay .download-spinner {
  width: 22px; height: 22px; border: 3px solid rgba(255,255,255,0.15); border-top-color: #fff; border-radius: 50%; animation: download-spin 0.9s linear infinite;
}
#download-overlay .download-label { color: #fff; font-weight:600; font-size:0.98rem; }

/* Player / waveform */
.player-container { width: 100%; max-width: 780px; margin: 1rem 0; background: rgba(255,255,255,0.03); padding: 12px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
/* scope styles to page-local player only so persistent player is unaffected */
.player-container .player-controls { display:flex; align-items:center; gap:12px; align-items:center; width:100%; }
/* ensure every direct child centers vertically as a fallback */
.player-container .player-controls > * { align-self: center; }
/* Big green circular play/pause button on the left */
.player-container .play-btn {
  width:56px; height:56px; min-width:56px; min-height:56px;
  border-radius:50%;
  background:#1db954; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(29,185,84,0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; font-size:18px;
  position: relative; /* needed to absolutely center svgs */
}
.player-container .play-btn:hover { transform: translateY(-2px); box-shadow:0 12px 28px rgba(29,185,84,0.32); }
/* Position both icons in the same place and toggle opacity so they don't appear together */
.player-container .play-btn svg.icon-play,
.player-container .play-btn svg.icon-pause {
  width:22px; height:22px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); fill:currentColor;
  transition: opacity 120ms ease, transform 120ms ease;
}
.player-container .play-btn svg.icon-play { opacity:1; }
.player-container .play-btn svg.icon-pause { opacity:0; }
.player-container .play-btn.is-playing svg.icon-play { opacity:0; transform:translate(-50%,-50%) scale(0.92); }
.player-container .play-btn.is-playing svg.icon-pause { opacity:1; transform:translate(-50%,-50%) scale(1); }
.player-container .waveform-wrapper { flex:1; margin-left:12px; cursor:pointer; min-width:0; overflow:hidden; }
.player-container .controls-time { margin-left:12px; color:#bdbdbd; font-size:0.95rem; white-space:nowrap; }
.player-container .controls-time #currentTime { margin-right:8px; }

/* Ensure the controls row aligns: fixed width for button, flexible waveform, right-aligned time */
.player-container .player-controls { display:flex; align-items:center; gap:12px; }
.player-container .player-controls > .play-btn { flex: 0 0 auto; }
.player-container .player-controls > .waveform-wrapper { flex: 1 1 auto; }
.player-container .player-controls > .controls-time { flex: 0 0 auto; }
.wave-bg { display:flex; gap:2px; align-items:flex-end; height:48px; overflow:hidden; max-width:100%; box-sizing:border-box; }
.wave-bg .wave-bar { align-self:flex-end; width:3px; }

/* time display sits inside the panel and centered */
.player-container .time-display { text-align:center; margin-top:8px; }

/* Ensure waveform wrapper centers its content vertically */
.player-container .waveform-wrapper { display:flex; align-items:center; }
.wave-bar { width:3px; background: rgba(255,255,255,0.25); border-radius:2px; }
.time-display { margin-top:8px; color:#bdbdbd; font-size:0.9rem; display:flex; gap:8px; justify-content:center; }

/* Admin upload form small rules (fragment-level) */
.upload-form input, .upload-form textarea, .upload-form select, .upload-form button {
  width: 100%; margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid #444; background: #181818; color: #fff; font-size: 1rem;
}
.upload-form button { background: #1db954; border:none; cursor:pointer; font-weight:600; }
.error { background: #ff4c4c; color:#fff; padding:0.6rem 0.8rem; border-radius:6px; margin-bottom:1rem; text-align:center; }

/* small responsive tweaks */
@media (max-width:900px){
  .song-main { padding:1.2rem; }
  .wave-bg { height:36px; }
}

@media (max-width:600px) {
  .player-container { padding: 8px; }
  .player-container .play-btn { width:48px; height:48px; min-width:48px; min-height:48px; }
  .wave-bg { height:34px; gap:1px; }
  .wave-bg .wave-bar { width:2px; }
}

@media (max-width:420px) {
  .wave-bg { height:30px; gap:1px; }
  .wave-bg .wave-bar { width:1.5px; }
}

/* Media badge overlay on tiles */
.trending-img-wrap, .song-img-wrap { position: relative; display: inline-block; }
.search-results .song-card img,
.song-img-wrap img,
.trending-img { width:100%; border-radius:6px; margin-bottom:0.8rem; display:block; object-fit:cover; aspect-ratio:1/1; height:auto; }
.media-badge { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap:8px; padding:6px 10px; border-radius: 999px; font-weight:700; font-size:0.85rem; color:#fff; backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.media-badge .icon-svg { width:14px; height:14px; display:inline-block; flex:0 0 auto; color:inherit; }
.media-badge .label { line-height:1; }
.media-badge.audio { background: linear-gradient(180deg,#1db954,#13a84b); }
.media-badge.video { background: rgba(34,34,34,0.95); }

/* Slightly smaller badge on small screens */
@media (max-width:600px) {
  .media-badge { right: 6px; bottom: 6px; padding:4px 8px; font-size:0.72rem; gap:6px; }
  .media-badge .icon-svg { width:12px; height:12px; }
}

/* Load more button styles */
.load-more-wrap { display:block; width:100%; text-align:center; margin-top:12px; }
.load-more-btn { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #fff; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; display:inline-block; z-index:60; }
.load-more-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.02); }
.load-more-btn:disabled { opacity: 0.6; cursor: default; }