/* VAFONOR — استایل قابلیت‌های ویژه‌ی کاربران پرمیوم */

/* دکمه‌ی دنبال‌کردن هنرمند (artist.php) */
.artist-follow-btn{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  padding:9px 18px; border-radius:999px; border:1px solid var(--music-accent, var(--accent));
  background:transparent; color:var(--music-accent, var(--accent)); font-size:13px; font-weight:800;
  cursor:pointer; transition:background .2s,color .2s,transform .15s; font-family:inherit;
}
.artist-follow-btn:hover{ transform:translateY(-1px) }
.artist-follow-btn:not(.is-locked):hover{ background:var(--music-accent, var(--accent)); color:#0a1410 }
.artist-follow-btn.is-following{ background:var(--music-accent, var(--accent)); color:#0a1410 }
.artist-follow-btn.is-locked{ opacity:.75; border-color:var(--border-strong); color:var(--muted) }
.artist-follow-btn.is-locked:hover{ opacity:1; border-color:var(--accent); color:var(--accent) }
.artist-follow-btn .afb-icon{ display:flex; align-items:center }
.artist-follow-btn.is-following .afb-icon svg path{ display:none }

/* دکمه‌ی شناور پرمیوم */
.vaf-premium-fab{
  position:fixed; z-index:1600; inset-inline-end:18px; bottom:calc(var(--music-bar-height, 76px) + 22px);
  width:50px; height:50px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#0a1410;
  background:linear-gradient(135deg,#f6c343,#e8c766);
  box-shadow:0 10px 26px rgba(230,190,80,.4);
  transition:transform .2s, box-shadow .2s;
}
.vaf-premium-fab:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 14px 32px rgba(230,190,80,.5) }
body:not(.has-music-bar) .vaf-premium-fab{ bottom:22px }

/* پنل قابلیت‌های پرمیوم */
.vaf-premium-panel{
  position:fixed; z-index:1601; inset-inline-end:18px;
  bottom:calc(var(--music-bar-height, 76px) + 80px);
  width:320px; max-width:calc(100vw - 32px); max-height:min(72vh,620px);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg,18px);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.97);
  transition:opacity .2s, transform .2s, visibility .2s;
  overflow:hidden;
}
.vaf-premium-panel.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1) }
body:not(.has-music-bar) .vaf-premium-panel{ bottom:86px }

.vpp-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
  font-size:13.5px; font-weight:800; color:var(--text); flex-shrink:0;
}
.vpp-head button{
  background:transparent; border:none; color:var(--muted); font-size:20px; line-height:1;
  cursor:pointer; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.vpp-head button:hover{ background:var(--surface-hover); color:var(--text) }

.vpp-body{ overflow-y:auto; padding:6px 16px 18px }
.vpp-section{ padding:14px 0; border-bottom:1px solid var(--border) }
.vpp-section:last-child{ border-bottom:none }
.vpp-section h4{ font-size:12.5px; font-weight:800; color:var(--text); margin-bottom:10px }

.vpp-switch{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); cursor:pointer }
.vpp-switch input{ width:16px; height:16px; accent-color:var(--music-accent, var(--accent)); cursor:pointer }

.vpp-eq-bands{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; margin:14px 4px 8px; height:110px }
.vpp-eq-band{ display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; flex:1 }
.vpp-eq-band input[type=range]{
  writing-mode: vertical-lr; direction:rtl;
  width:5px; height:80px; -webkit-appearance:slider-vertical; appearance:slider-vertical;
  accent-color:var(--music-accent, var(--accent)); cursor:pointer; background:transparent;
}
.vpp-eq-label{ font-size:9.5px; color:var(--muted-2); font-family:var(--font-mono) }
.vpp-eq-presets{ display:flex; gap:6px; flex-wrap:wrap }
.vpp-eq-presets button{
  flex:1; min-width:60px; padding:7px 8px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg-soft); color:var(--muted); font-size:11px; font-weight:700; cursor:pointer;
  transition:border-color .15s,color .15s; font-family:inherit;
}
.vpp-eq-presets button:hover{ border-color:var(--music-accent, var(--accent)); color:var(--music-accent, var(--accent)) }
.vpp-hint{ font-size:11px; color:var(--muted-2); margin:8px 0 0 }

.vpp-pomodoro{ text-align:center }
.vpp-pomo-time{ font-size:34px; font-weight:800; font-family:var(--font-mono); color:var(--text); letter-spacing:-.01em }
.vpp-pomo-phase{ font-size:12px; color:var(--muted); margin-top:2px }
.vpp-pomo-controls{ display:flex; gap:8px; justify-content:center; margin-top:12px }

.vpp-btn{
  padding:9px 16px; border-radius:999px; border:none; cursor:pointer; font-size:12.5px; font-weight:800;
  background:var(--music-accent, var(--accent)); color:#0a1410; transition:transform .15s, filter .15s; font-family:inherit;
}
.vpp-btn:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.vpp-btn-ghost{ background:transparent; border:1px solid var(--border-strong); color:var(--text) }
.vpp-btn-ghost:hover{ border-color:var(--muted); filter:none }

.vpp-sleep{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.vpp-sleep select{
  flex:1; min-width:100px; padding:9px 10px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg-soft); color:var(--text); font-size:12.5px; font-family:inherit; outline:none;
}
.vpp-sleep select:focus{ border-color:var(--music-accent, var(--accent)) }
#vppSleepStatus{ color:var(--music-accent, var(--accent)); font-weight:700 }

.vpp-mood-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:8px }
.vpp-mood-btn{
  padding:9px 4px; border-radius:9px; border:1px solid var(--border-strong); background:var(--bg-soft);
  color:var(--text); font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:border-color .15s, color .15s;
}
.vpp-mood-btn:hover{ border-color:var(--music-accent, var(--accent)); color:var(--music-accent, var(--accent)) }

.vpp-foryou-list{ display:flex; flex-direction:column; gap:8px }
.vpp-foryou-btn{ width:100%; text-align:right; border-radius:9px; padding:10px 14px }

/* --- کارت‌های Find Similar / کاربران شبیه تو (تو صفحه‌ی آهنگ) --- */
.vaf-premium-track-section{ margin:22px 0 }
.vaf-premium-track-section h3{ font-size:14px; font-weight:800; margin:0 0 12px; display:flex; align-items:center; gap:7px }
.vaf-simcard-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px }
.vaf-simcard{ cursor:pointer; border-radius:var(--radius-sm,10px); overflow:hidden; background:var(--surface-hover,var(--bg-soft)); border:1px solid var(--border); transition:transform .15s, border-color .15s }
.vaf-simcard:hover{ transform:translateY(-2px); border-color:var(--music-accent, var(--accent)) }
.vaf-simcard-cover{ aspect-ratio:1/1; background:var(--bg); display:flex; align-items:center; justify-content:center; overflow:hidden }
.vaf-simcard-cover img{ width:100%; height:100%; object-fit:cover }
.vaf-simcard-title{ font-size:12px; font-weight:700; padding:8px 8px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vaf-simcard-artist{ font-size:11px; color:var(--muted); padding:0 8px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* دسکتاپ حداکثر ۹ آهنگ، موبایل حداکثر ۴ تا (هم برای Find Similar هم «کسانی که این آهنگ را دوست داشتند») */
.vaf-simcard-grid > .vaf-simcard:nth-child(n+10){ display:none }
@media(max-width:700px){
  .vaf-simcard-grid > .vaf-simcard:nth-child(n+5){ display:none }
}

@media(max-width:480px){
  .vaf-premium-fab{ inset-inline-end:12px; width:44px; height:44px }
  .vaf-premium-panel{ inset-inline-end:8px; width:calc(100vw - 16px) }
  .vpp-mood-grid{ grid-template-columns:repeat(3,1fr) }
}