/* ===== MelaninVybe Player – clean dark UI ===== */
:root{
  --mv-bg:#0b0f14;
  --mv-panel:#0f1520;
  --mv-panel-2:#121a26;
  --mv-text:#e2e8f0;
  --mv-dim:#94a3b8;
  --mv-accent:#22c55e;     /* green */
  --mv-accent-2:#38bdf8;   /* cyan */
  --mv-border:#1f2937;
}

/* overall layout */
.mv-player-container{
  background:transparent;
  color:var(--mv-text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding:24px;
  display:flex;
  gap:24px;
  max-width:1200px;
  margin:0 auto;
}

/* left rail */
.mv-left-rail{
  flex:0 0 240px;
  background:var(--mv-panel);
  border:1px solid var(--mv-border);
  border-radius:14px;
  padding:14px;
}
.mv-create-playlist{
  width:100%;
  border:1px solid var(--mv-border);
  background:linear-gradient(180deg, #1a2333, #14202c);
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
}
.mv-create-playlist:hover{ filter:brightness(1.08); }
.mv-library-list{ list-style:none; padding:0; margin:12px 0 0; }
.mv-library-list li{ color:var(--mv-dim); margin:8px 0; }

/* main content (no background image) */
.mv-main-content{
  flex:1;
  background:var(--mv-panel);
  border:1px solid var(--mv-border);
  border-radius:14px;
  padding:18px;
}

/* tabs + search */
.mv-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.mv-tab{
  border:1px solid var(--mv-border); background:var(--mv-panel-2);
  color:var(--mv-text); padding:6px 10px; border-radius:8px; cursor:pointer;
}
.mv-tab.active{ background:var(--mv-accent); border-color:transparent; color:#00130a; }
.mv-search{
  display:block; width:100%; max-width:420px; margin:8px 0 6px 0;
  border-radius:10px; border:1px solid var(--mv-border);
  background:#0d1117; color:var(--mv-text); padding:8px 12px;
}

/* section headers */
.mv-section-title{
  color:#fff; font-size:1.1rem; font-weight:700; margin:14px 0 8px;
}

/* grids */
.mv-popular-songs, .mv-artists{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:16px;
}

/* song card */
.mv-song-card{
  background:var(--mv-panel-2);
  border:1px solid var(--mv-border);
  border-radius:12px;
  padding:10px;
  transition:transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.mv-song-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.45); }
.mv-song-card img{
  width:100%; height:160px; object-fit:cover;
  border-radius:8px; display:block; background:#0d1117;
}
.mv-song-card .mv-title{ margin-top:8px; font-weight:600; color:var(--mv-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mv-song-card .mv-artist{ font-size:.85rem; color:var(--mv-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* artist chips (placeholder for now) */
.mv-artist-chip{
  display:flex; align-items:center; gap:8px;
  background:var(--mv-panel-2);
  border:1px solid var(--mv-border);
  border-radius:999px;
  padding:8px 10px;
}

/* sticky player */
.mv-sticky-player{
  position:fixed; left:0; right:0; bottom:0;
  background:#0d1117; border-top:1px solid var(--mv-border);
  padding:10px; display:flex; align-items:center; gap:10px; z-index:1000;
}
.mv-player-controls button{
  background:#111827; border:1px solid var(--mv-border);
  color:#cbd5e1; padding:6px 10px; border-radius:8px; cursor:pointer;
}
.mv-player-controls button:hover{ background:#1f2937; }
.mv-seek{ width:160px; }
.mv-volume{ width:100px; }

/* responsive */
@media (max-width:900px){
  .mv-player-container{ flex-direction:column; padding:14px; }
  .mv-left-rail{ flex:1 1 auto; }
  .mv-sticky-player{ position:sticky; bottom:auto; }
}

/* --- Card actions & overlays (hard overrides) --- */
.mv-song-card{
  position:relative;
  border-radius:.75rem;
  overflow:hidden;
}

/* image + meta */
.mv-card-img{ display:block; width:100%; height:auto; }
.mv-card-meta{ padding:.6rem .6rem 3.2rem; } /* extra bottom space for buttons */

/* normalize any theme button styles inside cards */
.mv-song-card .mv-card-fav,
.mv-song-card .mv-card-add{
  position:absolute !important;   /* pin to corners even if theme resets it */
  bottom:10px;                    /* distance from card bottom */
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; line-height:1;
  border:0; border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  z-index:3;
  cursor:pointer;
}

/* Heart (left) */
.mv-song-card .mv-card-fav{
  left:10px;
  background:#1f2937; color:#fff; font-weight:700;
  opacity:.95;
}
.mv-song-card .mv-card-fav.on{ background:#e63946; }

/* Add (right) */
.mv-song-card .mv-card-add{
  right:10px;
  background:#ffd166; color:#111; font-weight:800;
}

.mv-song-card .mv-card-add:hover,
.mv-song-card .mv-card-fav:hover{
  transform:translateY(-1px);
}

/* Pick mode hint + toast (top & bright) */
.mv-pick-hint, .mv-toast{
  position:fixed; left:50%; transform:translateX(-50%);
  top:18px;
  background:#111; color:#fff; padding:.7rem 1rem; border-radius:.6rem;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; z-index:9999;
  transition:opacity .15s ease, transform .15s ease;
}
.mv-pick-hint.show, .mv-toast.show{ opacity:1; }

body.mv-pick-mode .mv-pl-item{
  outline:2px dashed rgba(255,209,102,.8);
  outline-offset:4px; cursor:copy;
}
body.mv-pick-mode .mv-pl-item:hover{
  background:rgba(255,209,102,.12);
}


/* Hide Upload UI for non-artists (fans/listeners) */
.mv-no-upload .mv-fab-upload { display: none !important; }  /* any floating upload button */
.mv-no-upload a[href*="/upload-music"] { display: none !important; } /* fallback for header link */



/* base icon */
.mv-ico { display:inline-block; vertical-align:middle; }

/* sidebar/dock buttons */
.dock-btn { 
  width: 48px; height: 48px; border-radius: 12px; 
  display:flex; align-items:center; justify-content:center; 
  color:#0f172a; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.dock-btn:hover { color:#111827; filter:brightness(1.05); }
.dock-btn.is-active { background:#4f58ff; color:#fff; }


/* --- Artist page (Step 5) --- */
.mv-artist-page{background:#121212;color:#fff;padding:20px;max-width:1200px;margin:0 auto}
.mv-artist-banner{height:260px;background:#222 center/cover;margin-bottom:18px;border-radius:12px}
.mv-artist-profile{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.mv-artist-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.15)}
.mv-artist-bio{opacity:.9}
.mv-artist-video video{width:100%;max-width:820px;border-radius:10px;margin:12px 0}
.mv-artist-tracks h2,.mv-donation-panel h2{margin:16px 0 10px}
.mv-track-card{display:flex;gap:10px;align-items:center;background:#151a22;border:1px solid #1f2937;border-radius:10px;padding:10px;margin:8px 0}
.mv-track-card img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.mv-track-title{font-weight:600}
.mv-track-open{font-size:.9rem;text-decoration:none;color:#38bdf8}
.mv-donation-panel{margin-top:18px;background:#151a22;border:1px solid #1f2937;border-radius:12px;padding:16px}
.mv-donate-button{display:inline-block;background:#ff7a1a;color:#111;font-weight:700;border-radius:999px;padding:10px 16px;text-decoration:none}
.mv-donate-button:hover{filter:brightness(1.05)}
@media (max-width:800px){
  .mv-artist-profile{flex-direction:column;align-items:flex-start}
  .mv-artist-avatar{width:80px;height:80px}
}

/* Artist “Add to Playlist” UI tweaks */
.mv-playlist-picker label {
  font-size: 0.9rem;
  opacity: .85;
}
#mvPlaylistSelect {
  height: 34px;
  line-height: 34px;
  padding: 0 .5rem;
  border-radius: 8px;
}

/* Track card actions */
.mv-track-card .mv-track-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.mv-track-card .mv-track-title {
  margin: 0 .5rem 0 0;
  font-size: 1rem;
}

.mv-track-card .mv-track-open {
  padding: 4px 8px;
  font-size: .85rem;
  border-radius: 9999px;
}

/* The playlist button — smaller pill */
button.mv-add-to-playlist {
  padding: 6px 10px;
  font-size: .85rem;
  line-height: 1;
  border-radius: 9999px;
  background: var(--mv-accent, #5e94ff);
  color: #fff;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  transition: transform .05s ease-in-out, opacity .15s;
}
button.mv-add-to-playlist:hover { opacity: .9; }
button.mv-add-to-playlist:active { transform: translateY(1px); }

/* Tighter track rows overall */
.mv-track-grid .mv-track-card {
  padding: .75rem 1rem;
}

/* Playlist pill */
.mv-add-to-playlist{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:6px 10px;
  font-size:12px;
  line-height:1;
  border-radius:14px;
  background:#198754;      /* Bootstrap-ish green */
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  text-decoration:none;
  cursor:pointer;
}
.mv-add-to-playlist:hover,
.mv-add-to-playlist:focus{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

/* Smaller ghost link next to it */
.mv-track-open.mv-button.mv-button--ghost{
  font-size:12px;
  padding:4px 8px;
}

/* Ensure the inline Upload link on the artist page is actually visible */
.mv-upload-link{
  display:inline-block !important;
  color:#f3f3f3;
}
.mv-upload-link:hover{ text-decoration:underline; }

.mv-artist-avatar-wrap{ width:80px; height:80px; }
.mv-artist-avatar{
  width:80px; height:80px; object-fit:cover; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
}
.mv-artist-avatar--placeholder{
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg,#2c2c2c,#3a3a3a);
  border:1px solid rgba(255,255,255,.1);
}

/* MV: kill any BuddyBoss mask on artist pages */
html.buddypanel--is-open { overflow: auto !important; }
html.buddypanel--is-open::before { 
  content: none !important; 
  display: none !important; 
  background: transparent !important; 
}

/* If BuddyBoss uses real overlay nodes on your theme build */
.bb-overlay,
.bp-legacy .mfp-bg,
.bp-legacy .mfp-wrap {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Icon-only edit button near the artist title */
.mv-icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background:#fff; border:1px solid #e5e7eb; color:#111;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .08s ease, box-shadow .15s ease;
  margin:.25rem 0 .75rem .25rem;
}
.mv-icon-btn svg { display:block; }
.mv-icon-btn:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.mv-icon-btn--edit { /* keep for future theming */ }

/* Small primary button variant used inside callouts */
.mv-btn--tiny { font-size:12px; line-height:1; padding:.38rem .6rem; border-radius:8px; }

/* Donation setup callout */
.mv-callout {
  border-radius:10px; padding:.75rem .9rem; border:1px solid #e5e7eb;
  background:#fff; color:#111;
}
.mv-callout--tip { border-color:#dbeafe; background:#f8fbff; }
.mv-callout strong { font-weight:600; }

/* ─────────────────────────────────────────────────────────────
   MelaninVybe — Sticky Player (Mobile Polish v1.1)
   Uses class-only selectors (no #id) with higher specificity
   ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Container, spacing, theme */
  .mv-player-container .mv-sticky-player {
    --mv-bg: #0f1620;
    --mv-card: #121a26;
    --mv-text: #e8eef7;
    --mv-sub: #9fb2c7;
    --mv-accent: #2e90fa;
    --mv-gap: 12px;

    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    background: var(--mv-bg) !important;
    color: var(--mv-text) !important;
    padding: 12px 14px !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.25) !important;

    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    grid-template-areas:
      "poster info"
      "controls controls"
      "seek seek"
      "volume volume" !important;
    align-items: center !important;
    gap: var(--mv-gap) !important;
    border-radius: 16px !important;
  }

  /* Poster (cover art) */
  .mv-player-container .mv-sticky-player .mv-player-poster {
    grid-area: poster !important;
    width: 64px !important; height: 64px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    background: var(--mv-card) !important;
    display: block !important;
  }

  /* Title / Artist block */
  .mv-player-container .mv-sticky-player .mv-player-info {
    grid-area: info !important;
    min-width: 0 !important;
  }
  .mv-player-container .mv-sticky-player .mv-player-title {
    display: block !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--mv-text) !important;
  }
  .mv-player-container .mv-sticky-player .mv-player-artist {
    display: block !important;
    margin-top: 3px !important;
    font-size: 13px !important;
    color: var(--mv-sub) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Controls row */
  .mv-player-container .mv-sticky-player .mv-player-controls {
    grid-area: controls !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    background: var(--mv-card) !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }
  .mv-player-container .mv-sticky-player .mv-player-controls > button {
    width: 44px !important; height: 44px !important;           /* touch target */
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
    color: var(--mv-text) !important;
    font-size: 0 !important;                                   /* hide raw emoji/text */
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  .mv-player-container .mv-sticky-player .mv-player-controls > button:active {
    transform: scale(.97) !important;
  }

  /* Glyph fallbacks (in case theme icons/images don’t load) */
  .mv-player-container .mv-sticky-player .mv-prev::before        { content: "⏮"; font-size: 18px; }
  .mv-player-container .mv-sticky-player .mv-play-pause::before  { content: "▶";  font-size: 20px; }
  .mv-player-container .mv-sticky-player .mv-next::before        { content: "⏭"; font-size: 18px; }
  .mv-player-container .mv-sticky-player .mv-shuffle::before     { content: "🔀"; font-size: 18px; }
  .mv-player-container .mv-sticky-player .mv-repeat::before      { content: "🔁"; font-size: 18px; }
  /* If your JS toggles a 'is-playing' state, swap icon */
  .mv-player-container .mv-sticky-player .is-playing.mv-play-pause::before { content: "⏸"; }

  /* Seek row */
  .mv-player-container .mv-sticky-player .mv-seek-bar {
    grid-area: seek !important;
    margin-top: 4px !important;
    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    column-gap: 10px !important;
    align-items: center !important;
  }
  .mv-player-container .mv-sticky-player .mv-current-time,
  .mv-player-container .mv-sticky-player .mv-duration {
    font-size: 12px !important; color: var(--mv-sub) !important;
  }
  .mv-player-container .mv-sticky-player .mv-seek {
    -webkit-appearance: none; appearance: none;
    width: 100% !important; height: 6px !important;
    background: rgba(255,255,255,.18) !important;
    border-radius: 999px !important; outline: none !important;
  }
  .mv-player-container .mv-sticky-player .mv-seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px !important; height: 18px !important; border-radius: 50% !important;
    background: var(--mv-accent) !important; border: 0 !important;
    box-shadow: 0 0 0 3px rgba(46,144,250,.25) !important;
  }

  /* Volume */
  .mv-player-container .mv-sticky-player .mv-volume {
    grid-area: volume !important;
    width: 100% !important; margin-top: 6px !important;
    -webkit-appearance: none; appearance: none;
    height: 6px !important; border-radius: 999px !important;
    background: rgba(255,255,255,.18) !important; outline: none !important;
  }
  .mv-player-container .mv-sticky-player .mv-volume::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px !important; height: 16px !important; border-radius: 50% !important;
    background: var(--mv-sub) !important; border: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   MV Mobile Portrait — De-dupe icons + enforce 44px targets
   ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) and (orientation: portrait) {

  /* Hide any existing emoji/text/icons inside the buttons */
  .mv-player-container .mv-sticky-player .mv-player-controls > button {
    font-size: 0 !important;        /* hides button text/emoji */
    line-height: 0 !important;
    background-image: none !important; /* kill sprite/bg icons */
    position: relative !important;
  }
  /* If buttons contain inner <img>/<svg>/<span>, hide them too */
  .mv-player-container .mv-sticky-player .mv-player-controls > button > * {
    display: none !important;
  }

  /* Our glyphs (single source of truth) */
  .mv-player-container .mv-sticky-player .mv-prev::before       { content: "⏮"; font-size: 18px; }
  .mv-player-container .mv-sticky-player .mv-play-pause::before { content: "▶";  font-size: 20px; }
  .mv-player-container .mv-sticky-player .mv-next::before       { content: "⏭"; font-size: 18px; }
  .mv-player-container .mv-sticky-player .mv-shuffle::before    { content: "🔀"; font-size: 18px; }
  .mv-player-container .mv-sticky-player .mv-repeat::before     { content: "🔁"; font-size: 18px; }

  /* When JS toggles 'is-playing', show pause */
  .mv-player-container .mv-sticky-player .mv-play-pause.is-playing::before {
    content: "⏸";
  }
}

/* ─────────────────────────────────────────────────────────────
   MV Sticky Player — Click-through fix for artist page
   - Let background of the bar ignore clicks
   - Keep controls/sliders clickable
   - Lower z-index under BuddyBoss side nav
   ──────────────────────────────────────────────────────────── */
@media (max-width: 2000px) {
  /* Apply on all viewports to be safe */
  .mv-player-container .mv-sticky-player {
    z-index: 10 !important;           /* BuddyBoss nav is typically >20 */
    pointer-events: none !important;   /* let clicks pass through the bar itself */
  }

  /* Re-enable pointer events on interactive children */
  .mv-player-container .mv-sticky-player .mv-player-controls,
  .mv-player-container .mv-sticky-player .mv-player-controls > button,
  .mv-player-container .mv-sticky-player .mv-seek-bar,
  .mv-player-container .mv-sticky-player .mv-seek-bar .mv-seek,
  .mv-player-container .mv-sticky-player .mv-volume {
    pointer-events: auto !important;
  }

  /* Make poster/title area non-blocking too */
  .mv-player-container .mv-sticky-player .mv-player-poster,
  .mv-player-container .mv-sticky-player .mv-player-info {
    pointer-events: auto !important;   /* keep taps on title (if you use it) */
  }
}

/* MV — Artist page left-edge click-through lane */
.single-mv_artist .mv-artist-page::before {
  content: "";
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 60px;                 /* width of BuddyBoss left rail trigger */
  pointer-events: none !important;   /* nothing blocks clicks here */
  z-index: 999999;             /* sits above but invisible and non-blocking */
}

/* MV Artist page — ensure no full-page stack blocks the left rail */
.single-mv_artist .mv-artist-page,
.single-mv_artist .mv-artist-banner,
.single-mv_artist .mv-artist-tracks,
.single-mv_artist .mv-donation-panel {
  position: relative !important;
  z-index: 0 !important;         /* under site chrome (sidebar trigger) */
}

/* Keep the sticky player well below site chrome */
.single-mv_artist .mv-sticky-player {
  z-index: 5 !important;
}

/* ─────────────────────────────────────────────────────────────
   MV — BuddyBoss panel must sit above everything on artist pages
   and receive pointer events while open.
   ──────────────────────────────────────────────────────────── */
body.buddypanel--is-open.single-mv_artist .buddypanel,
body.buddypanel--is-open.single-mv_artist .bb-sidebar,
body.buddypanel--is-open.single-mv_artist #buddypanel,
body.buddypanel--is-open.single-mv_artist .bb-offcanvas {
  position: relative !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
}

/* While the panel is open, make the main artist page ignore clicks
   so nothing underneath can steal them */


/* …but keep our sticky player controls tappable if you need them
   (optional; remove if you don't want player active over the menu) */
body.buddypanel--is-open.single-mv_artist .mv-sticky-player,
body.buddypanel--is-open.single-mv_artist .mv-sticky-player * {
  pointer-events: auto !important;
}

/* Some themes add a global mask when the panel opens—kill it on artist pages */
body.buddypanel--is-open.single-mv_artist .bb-overlay,
body.buddypanel--is-open.single-mv_artist .bb-modal-backdrop,
body.buddypanel--is-open.single-mv_artist .bb-quick-panel-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* BuddyBoss panel must be above all artist content (z-index island). */
.single-mv_artist .buddypanel,
.single-mv_artist .bb-sidebar,
.single-mv_artist #buddypanel,
.single-mv_artist .bb-offcanvas {
  position: fixed !important;   /* detach from any transformed parent */
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 2147483600 !important;     /* very high */
  pointer-events: auto !important;
}


/* put in a site CSS file */
.single-mv_artist .bb-quick-panel-overlay,
.single-mv_artist .bb-overlay,
.single-mv_artist .bb-modal-backdrop {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}