/*
Theme Name: Music Wave
Theme URI: https://example.com/music-wave
Author: Music Wave Team
Author URI: https://example.com
Description: A modern, stylish music sharing & streaming WordPress theme with custom Song post type, Playlist taxonomy, AJAX-powered audio player, and frontend song upload. Play your MP3 collection on desktop and mobile.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: music-theme
Tags: music, audio, custom-post-type, dark-mode, responsive
*/

/* =========================================================
   MUSIC WAVE — ROOT VARIABLES / COLOR SCHEME
   ========================================================= */
:root{
  --bg-color: #0e0e16;
  --bg-elevated: #161622;
  --bg-card: #1b1b2b;
  --bg-card-hover: #22223a;
  --border-color: #2a2a40;

  --accent-1: #8b5cf6;   /* purple */
  --accent-2: #ec4899;   /* pink   */
  --accent-3: #22d3ee;   /* cyan   */
  --gradient-main: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(236,72,153,0.15) 100%);

  --text-main: #f4f4f8;
  --text-dim: #a3a3b8;
  --text-faint: #6b6b85;

  --success: #34d399;
  --danger: #f87171;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 25px rgba(139,92,246,0.35);

  --player-height: 92px;
  --header-height: 76px;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg-color);
  color: var(--text-main);
  font-family: 'Poppins','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  font-size:15px;
  line-height:1.6;
  padding-bottom: var(--player-height);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition: color .2s ease; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background: var(--bg-color); }
::-webkit-scrollbar-thumb{ background: var(--border-color); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent-1); }

.container{ max-width:1240px; margin:0 auto; padding:0 24px; }
.section-title{
  font-size:22px; font-weight:700; margin:0 0 20px;
  display:flex; align-items:center; gap:10px;
}
.section-title span.grad-text{
  background: var(--gradient-main);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-text{
  background: var(--gradient-main);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:50px; border:none;
  font-weight:600; font-size:14px; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary{ background: var(--gradient-main); color:#fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover{ transform: translateY(-2px); opacity:.94; }
.btn-outline{ background:transparent; border:1px solid var(--border-color); color:var(--text-main); }
.btn-outline:hover{ border-color: var(--accent-1); color: var(--accent-1); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index:1000;
  height: var(--header-height);
  display:flex; align-items:center;
  background: rgba(14,14,22,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-color);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.site-branding{ display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; }
.site-branding .logo-icon{
  width:38px; height:38px; border-radius:12px;
  background: var(--gradient-main);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-glow);
}
.site-branding .logo-icon svg{ width:20px; height:20px; fill:#fff; }

.main-navigation{ display:flex; align-items:center; gap:6px; }
.main-navigation ul{ display:flex; gap:4px; }
.main-navigation a{
  padding:10px 16px; border-radius:50px; color: var(--text-dim); font-weight:500; font-size:14px;
}
.main-navigation a:hover, .main-navigation .current-menu-item a{
  color:#fff; background: var(--bg-card);
}
.header-actions{ display:flex; align-items:center; gap:12px; }

.menu-toggle{
  display:none; background:none; border:none; color:var(--text-main);
  width:40px; height:40px; border-radius:10px; align-items:center; justify-content:center;
}
.menu-toggle:hover{ background: var(--bg-card); }
.menu-toggle svg{ width:22px; height:22px; fill:currentColor; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:70px 0 50px; position:relative; overflow:hidden;
  background: radial-gradient(circle at 20% 20%, rgba(139,92,246,0.18), transparent 45%),
              radial-gradient(circle at 80% 30%, rgba(236,72,153,0.15), transparent 45%);
}
.hero h1{ font-size:42px; font-weight:800; margin:0 0 14px; line-height:1.2; }
.hero p{ color: var(--text-dim); font-size:16px; max-width:560px; margin:0 0 26px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* =========================================================
   SONG GRID / CARDS
   ========================================================= */
.song-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
  gap:22px;
  margin: 10px 0 50px;
}
.song-card{
  background: var(--bg-card);
  border:1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding:14px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  position:relative;
}
.song-card:hover{
  background: var(--bg-card-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.song-card .cover-wrap{
  position:relative; border-radius: var(--radius-sm); overflow:hidden;
  aspect-ratio:1/1; margin-bottom:12px; background: var(--gradient-soft);
}
.song-card .cover-wrap img{ width:100%; height:100%; object-fit:cover; }
.song-card .play-btn{
  position:absolute; right:8px; bottom:8px;
  width:42px; height:42px; border-radius:50%;
  background: var(--gradient-main); border:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(8px) scale(.9);
  transition: all .2s ease; box-shadow: var(--shadow-glow);
}
.song-card:hover .play-btn{ opacity:1; transform: translateY(0) scale(1); }
.song-card .play-btn svg{ width:16px; height:16px; fill:#fff; margin-left:2px; }
.song-card h3{ font-size:15px; font-weight:600; margin:0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-card .song-artist{ font-size:13px; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-card .song-meta{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; color: var(--text-faint); }
.song-card.is-playing{ border-color: var(--accent-1); box-shadow: var(--shadow-glow); }

/* =========================================================
   PLAYLIST FILTER (AJAX dropdown)
   ========================================================= */
.playlist-filter-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:24px; padding:16px 18px;
  background: var(--bg-elevated); border:1px solid var(--border-color); border-radius: var(--radius-md);
}
.playlist-filter-bar label{ font-size:13px; color: var(--text-dim); font-weight:600; }
.mw-select{
  background: var(--bg-card); color: var(--text-main);
  border:1px solid var(--border-color); border-radius:50px;
  padding:10px 18px; font-size:14px; min-width:220px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23a3a3b8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center;
  padding-right:38px;
}
.mw-select:focus{ outline:none; border-color: var(--accent-1); }
.filter-loading{ display:none; align-items:center; gap:8px; color: var(--text-dim); font-size:13px; }
.filter-loading.active{ display:flex; }
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--border-color); border-top-color: var(--accent-1);
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* =========================================================
   SONG LIST (used in player page, single-song related, etc.)
   ========================================================= */
.song-list{ margin-bottom:40px; }
.song-list-row{
  display:flex; align-items:center; gap:16px;
  padding:12px 14px; border-radius: var(--radius-sm);
  cursor:pointer; transition: background .15s ease;
  border:1px solid transparent;
}
.song-list-row:hover{ background: var(--bg-card); }
.song-list-row.active{
  background: var(--gradient-soft); border-color: var(--accent-1);
}
.song-list-row .row-index{ width:26px; text-align:center; color: var(--text-faint); font-size:13px; flex-shrink:0; }
.song-list-row.active .row-index{ color: var(--accent-1); }
.song-list-row .row-thumb{
  width:48px; height:48px; border-radius:8px; overflow:hidden; flex-shrink:0;
  background: var(--gradient-soft);
}
.song-list-row .row-thumb img{ width:100%; height:100%; object-fit:cover; }
.song-list-row .row-info{ flex:1; min-width:0; }
.song-list-row .row-info h4{ margin:0 0 3px; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-list-row .row-info span{ font-size:12.5px; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-list-row .row-duration{ font-size:12.5px; color: var(--text-faint); flex-shrink:0; }
.song-list-row .row-play-icon{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-card-hover);
}
.song-list-row.active .row-play-icon{ background: var(--gradient-main); }
.song-list-row .row-play-icon svg{ width:13px; height:13px; fill: var(--text-dim); }
.song-list-row.active .row-play-icon svg{ fill:#fff; }
.empty-state{
  text-align:center; padding:60px 20px; color: var(--text-dim);
}
.empty-state .icon{ font-size:40px; margin-bottom:14px; }

/* =========================================================
   PLAYER PAGE — HERO PLAYER
   ========================================================= */
.now-playing-hero{
  display:flex; gap:36px; align-items:center; flex-wrap:wrap;
  padding:32px; margin-bottom:36px;
  background: var(--gradient-soft);
  border:1px solid var(--border-color); border-radius: var(--radius-lg);
}
.now-playing-hero .np-cover{
  width:220px; height:220px; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-soft); flex-shrink:0; background: var(--bg-card);
}
.now-playing-hero .np-cover img{ width:100%; height:100%; object-fit:cover; }
.now-playing-hero .np-info{ flex:1; min-width:240px; }
.now-playing-hero .np-info .eyebrow{ font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color: var(--accent-3); font-weight:700; margin-bottom:8px; }
.now-playing-hero .np-info h2{ font-size:30px; margin:0 0 8px; font-weight:800; }
.now-playing-hero .np-info .np-artist{ color: var(--text-dim); font-size:16px; margin-bottom:20px; }
.np-big-controls{ display:flex; align-items:center; gap:16px; }
.np-big-controls button{
  background: var(--bg-card); border:1px solid var(--border-color); border-radius:50%;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  color: var(--text-main); transition: all .15s ease;
}
.np-big-controls button:hover{ border-color: var(--accent-1); color: var(--accent-1); }
.np-big-controls button.play-pause-big{
  width:64px; height:64px; background: var(--gradient-main); border:none; box-shadow: var(--shadow-glow); color:#fff;
}
.np-big-controls button.play-pause-big:hover{ transform: scale(1.05); }
.np-big-controls svg{ width:18px; height:18px; fill:currentColor; }
.np-big-controls .play-pause-big svg{ width:22px; height:22px; }

/* =========================================================
   STICKY BOTTOM PLAYER (global, all pages)
   ========================================================= */
.global-player{
  position:fixed; left:0; right:0; bottom:0; z-index:2000;
  height: var(--player-height);
  background: rgba(19,19,30,0.97);
  backdrop-filter: blur(16px);
  border-top:1px solid var(--border-color);
  display:flex; align-items:center;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.global-player.active{ transform: translateY(0); }
.global-player .gp-inner{
  display:flex; align-items:center; width:100%; padding:0 20px; gap:20px;
}
.gp-track-info{ display:flex; align-items:center; gap:12px; width:230px; flex-shrink:0; min-width:0; }
.gp-track-info .gp-cover{ width:52px; height:52px; border-radius:8px; overflow:hidden; flex-shrink:0; background: var(--gradient-soft); }
.gp-track-info .gp-cover img{ width:100%; height:100%; object-fit:cover; }
.gp-track-info .gp-meta{ min-width:0; }
.gp-track-info .gp-title{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp-track-info .gp-artist{ font-size:12px; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp-like-btn{ background:none; border:none; color: var(--text-faint); width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.gp-like-btn:hover{ color: var(--accent-2); background: var(--bg-card); }
.gp-like-btn.liked{ color: var(--accent-2); }
.gp-like-btn svg{ width:17px; height:17px; fill:currentColor; }

.gp-center{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; max-width:640px; margin:0 auto; }
.gp-controls{ display:flex; align-items:center; gap:18px; }
.gp-controls button{ background:none; border:none; color: var(--text-dim); display:flex; align-items:center; justify-content:center; }
.gp-controls button:hover{ color:#fff; }
.gp-controls svg{ width:16px; height:16px; fill:currentColor; }
.gp-controls .gp-play{
  width:38px; height:38px; border-radius:50%; background: var(--gradient-main); color:#fff;
  box-shadow: var(--shadow-glow);
}
.gp-controls .gp-play svg{ width:15px; height:15px; margin-left:1px; }
.gp-controls .gp-shuffle.active, .gp-controls .gp-repeat.active{ color: var(--accent-1); }

.gp-progress-row{ display:flex; align-items:center; gap:10px; width:100%; }
.gp-time{ font-size:11px; color: var(--text-faint); width:36px; flex-shrink:0; }
.gp-time.time-end{ text-align:right; }
.gp-progress-bar{
  flex:1; height:5px; border-radius:10px; background: var(--border-color);
  position:relative; cursor:pointer;
}
.gp-progress-fill{
  position:absolute; left:0; top:0; height:100%; border-radius:10px;
  background: var(--gradient-main); width:0%;
}
.gp-progress-bar:hover .gp-progress-fill::after{ content:''; }
.gp-progress-fill::after{
  content:''; position:absolute; right:-6px; top:50%; transform: translateY(-50%);
  width:12px; height:12px; border-radius:50%; background:#fff; box-shadow: var(--shadow-glow);
  opacity:0; transition: opacity .15s ease;
}
.gp-progress-bar:hover .gp-progress-fill::after{ opacity:1; }

.gp-right{ display:flex; align-items:center; gap:14px; width:180px; justify-content:flex-end; flex-shrink:0; }
.gp-volume{ display:flex; align-items:center; gap:8px; }
.gp-volume svg{ width:16px; height:16px; fill: var(--text-dim); }
.gp-volume-bar{ width:80px; height:4px; border-radius:10px; background: var(--border-color); position:relative; cursor:pointer; }
.gp-volume-fill{ position:absolute; left:0; top:0; height:100%; border-radius:10px; background: var(--text-dim); width:80%; }

/* =========================================================
   UPLOAD FORM
   ========================================================= */
.upload-wrap{ max-width:680px; margin:40px auto 70px; }
.upload-card{
  background: var(--bg-elevated); border:1px solid var(--border-color);
  border-radius: var(--radius-lg); padding:34px;
}
.upload-card h1{ font-size:26px; margin:0 0 6px; }
.upload-card .sub{ color: var(--text-dim); margin-bottom:28px; font-size:14px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; color: var(--text-main); }
.form-group .hint{ font-size:12px; color: var(--text-faint); margin-top:6px; }
.form-control{
  width:100%; background: var(--bg-card); border:1px solid var(--border-color);
  border-radius: var(--radius-sm); padding:12px 14px; color: var(--text-main); font-size:14px;
}
.form-control:focus{ outline:none; border-color: var(--accent-1); }
textarea.form-control{ resize:vertical; min-height:90px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }

.dropzone{
  border:2px dashed var(--border-color); border-radius: var(--radius-md);
  padding:30px 20px; text-align:center; cursor:pointer;
  transition: all .2s ease; background: var(--bg-card);
}
.dropzone:hover, .dropzone.dragover{ border-color: var(--accent-1); background: var(--gradient-soft); }
.dropzone .dz-icon{ width:42px; height:42px; margin:0 auto 12px; opacity:.7; }
.dropzone .dz-icon svg{ width:100%; height:100%; fill: var(--accent-1); }
.dropzone p{ margin:0; color: var(--text-dim); font-size:13.5px; }
.dropzone .dz-filename{ margin-top:10px; font-size:13px; color: var(--success); font-weight:600; word-break:break-all; }

.playlist-checkboxes{
  display:flex; flex-wrap:wrap; gap:10px;
  background: var(--bg-card); border:1px solid var(--border-color);
  border-radius: var(--radius-sm); padding:14px;
}
.pl-check{ display:flex; align-items:center; gap:6px; }
.pl-check input{ accent-color: var(--accent-1); width:16px; height:16px; }
.pl-check label{ font-size:13px; margin:0; font-weight:500; color: var(--text-dim); }
.pl-check-new{ display:flex; gap:8px; margin-top:12px; }
.pl-check-new input{ flex:1; }

.upload-progress{ display:none; margin-top:18px; }
.upload-progress.active{ display:block; }
.upload-progress .bar-track{ height:8px; border-radius:10px; background: var(--border-color); overflow:hidden; }
.upload-progress .bar-fill{ height:100%; width:0%; background: var(--gradient-main); transition: width .2s ease; }
.upload-progress .pct{ font-size:12px; color: var(--text-dim); margin-top:6px; text-align:right; }

.form-message{
  padding:12px 16px; border-radius: var(--radius-sm); font-size:13.5px; margin-bottom:18px; display:none;
}
.form-message.show{ display:block; }
.form-message.success{ background: rgba(52,211,153,0.12); color: var(--success); border:1px solid rgba(52,211,153,0.3); }
.form-message.error{ background: rgba(248,113,113,0.12); color: var(--danger); border:1px solid rgba(248,113,113,0.3); }

/* =========================================================
   SINGLE SONG PAGE
   ========================================================= */
.single-song-hero{
  display:flex; gap:34px; align-items:flex-end; flex-wrap:wrap;
  padding:50px 0 34px;
}
.single-song-hero .ss-cover{ width:210px; height:210px; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-soft); flex-shrink:0; }
.single-song-hero .ss-cover img{ width:100%; height:100%; object-fit:cover; }
.single-song-hero .ss-info .eyebrow{ font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color: var(--text-dim); font-weight:700; }
.single-song-hero .ss-info h1{ font-size:38px; margin:8px 0; font-weight:800; }
.single-song-hero .ss-info .ss-artist{ color: var(--text-dim); font-size:16px; }
.single-song-hero .ss-actions{ display:flex; gap:12px; margin-top:20px; }
.song-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:18px 0; }
.song-tag{
  padding:6px 14px; border-radius:50px; background: var(--bg-card);
  border:1px solid var(--border-color); font-size:12.5px; color: var(--text-dim);
}
.song-tag:hover{ border-color: var(--accent-1); color: var(--accent-1); }
.song-description{ color: var(--text-dim); line-height:1.8; max-width:720px; margin-bottom:40px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid var(--border-color); padding:40px 0; margin-top:60px;
  background: var(--bg-elevated);
}
.site-footer .footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.site-footer p{ color: var(--text-faint); font-size:13px; margin:0; }
.footer-links{ display:flex; gap:18px; }
.footer-links a{ color: var(--text-dim); font-size:13px; }
.footer-links a:hover{ color: var(--accent-1); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .main-navigation{
    position:fixed; top: var(--header-height); left:0; right:0; bottom:0;
    background: var(--bg-color); flex-direction:column; align-items:stretch;
    padding:20px; transform: translateX(100%); transition: transform .25s ease;
    z-index:999;
  }
  .main-navigation.open{ transform: translateX(0); }
  .main-navigation ul{ flex-direction:column; gap:6px; }
  .main-navigation a{ display:block; padding:14px 18px; }
  .menu-toggle{ display:flex; }
  .hero h1{ font-size:30px; }
  .now-playing-hero{ padding:22px; gap:22px; }
  .now-playing-hero .np-cover{ width:150px; height:150px; }
  .now-playing-hero .np-info h2{ font-size:22px; }
}
@media (max-width: 760px){
  .gp-track-info{ width:auto; flex:1; }
  .gp-right{ display:none; }
  .gp-center{ max-width:none; }
  .gp-controls{ gap:12px; }
  .single-song-hero{ flex-direction:column; align-items:flex-start; }
  :root{ --player-height: 84px; }
  .gp-progress-row{ gap:6px; }
}
@media (max-width: 480px){
  .song-grid{ grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
  .gp-controls .gp-shuffle, .gp-controls .gp-repeat{ display:none; }
  .upload-card{ padding:22px; }
  .form-row{ gap:14px; }
}

/* Utility */
.mt-0{margin-top:0} .mb-0{margin-bottom:0} .text-center{text-align:center}
.mw-page-content{ padding: 30px 0 60px; }