/* بلوک پیشنهاد آهنگ (به‌موزیک) — از فونت داخلی خودِ سایت (Dana) استفاده می‌کند،
   هیچ فونت یا لینک خارجی لود نمی‌شود. */

.bm-track{
  --navy:#0f2b46; --blue:#1c5fa8; --red:#d21f2c;
  --cream:#f7f5f1; --slate:#6b7785; --line:#e6e2da;
  position:relative;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,43,70,.04), 0 12px 28px -14px rgba(15,43,70,.18);
  font-family:'Dana',Tahoma,sans-serif;
  direction:rtl;
  width:100%;
  box-sizing:border-box;
  margin:0 0 15px 0;
}
.bm-track *{ box-sizing:border-box; }

.bm-track__eyebrow{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  background:var(--navy);
  padding:10px 16px;
}
.bm-track__eyebrow-label{
  color:#cfe0f2; font-size:18px; font-weight:700; letter-spacing:.2px;
  display:flex; align-items:center; gap:8px;
}
.bm-dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;position:relative;flex:0 0 auto;}
.bm-dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:#3ddc84;
  animation:bm-ping 1.8s ease-out infinite;
}
@keyframes bm-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}

.bm-eq{display:flex;align-items:flex-end;gap:3px;height:12px;}
.bm-eq span{width:3px;background:#7fb2e6;border-radius:2px;animation:bm-eq 1.1s ease-in-out infinite;}
.bm-eq span:nth-child(1){height:40%;animation-delay:.0s}
.bm-eq span:nth-child(2){height:100%;animation-delay:.15s}
.bm-eq span:nth-child(3){height:60%;animation-delay:.3s}
.bm-eq span:nth-child(4){height:85%;animation-delay:.45s}
@keyframes bm-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* =====================================================
   بدنه‌ی کارت — یک طراحی واحد، عمودی و وسط‌چین، برای همه‌ی
   اندازه‌ها. چون ستون محتوای اصلی سایت (بین دو سایدبار) خودش
   محدوده، حالت افقی همیشه تنگ و شلوغ می‌شد؛ حذفش کردیم.
   ===================================================== */
.bm-track__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:22px 18px;
  gap:14px;
}

.bm-art{
  position:relative; flex:0 0 auto; width:140px; height:140px;
}
.bm-art__vinyl{
  position:absolute; inset:0; border-radius:50%;
  background: repeating-radial-gradient(circle at 50% 50%, #1b1b1b 0 2px, #262626 2px 4px);
  display:flex; align-items:center; justify-content:center;
  transform:translateX(-12%) scale(.92);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.bm-art__vinyl::after{
  content:'';width:30%;height:30%;border-radius:50%;
  background:var(--red);
  box-shadow:inset 0 0 0 3px #1b1b1b;
}
.bm-art__cover{
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.35);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  z-index:1;
}
.bm-art__cover img{width:100%;height:100%;object-fit:cover;display:block;}
.bm-track:hover .bm-art__vinyl{
  transform:translateX(-34%) scale(1);
  animation:bm-spin 3s linear infinite;
}
.bm-track:hover .bm-art__cover{ transform:translateX(8%) rotate(2deg); }
@keyframes bm-spin{to{transform:translateX(-34%) scale(1) rotate(360deg)}}

.bm-track__info{ width:100%; }
.bm-track__kicker{
  font-size:14px; color:var(--slate); margin:0 0 6px; line-height:1.7;
}
.bm-track__title{
  margin:0; font-size:19px; font-weight:900; color:var(--navy); line-height:1.5;
}
.bm-track__title b{color:var(--blue);}
.bm-track__title a{color:inherit;text-decoration:none;}
.bm-track__title a:hover{text-decoration:underline;text-decoration-color:var(--blue);}

/* زیرنویس انگلیسی (از enname / artist) — بدون فونت خارجی،
   فقط با فاصله‌ی حروف کمی از تیتر فارسی جدا می‌شود. */
.bm-track__title-en{
  margin:4px 0 0; font-size:13px; color:var(--slate);
  font-family:'Dana',Tahoma,sans-serif; letter-spacing:.2px;
  direction:ltr;
}

.bm-track__meta{
  margin-top:10px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.bm-badge{
  font-family:'Dana',Tahoma,sans-serif; font-size:12.5px; font-weight:500;
  color:var(--blue); background:#e8f0fa; border:1px solid #d3e3f4;
  padding:3px 10px; border-radius:999px;
}

.bm-track__actions{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
}
.bm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:inherit; font-size:15px; font-weight:700;
  padding:13px 18px; border-radius:9px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.bm-btn:active{transform:translateY(1px);}
.bm-btn--play{
  background:var(--red); color:#fff;
  box-shadow:0 8px 18px -8px rgba(210,31,44,.55);
  flex:1 1 auto; max-width:220px;
}
.bm-btn--play:hover{background:#b81824;}
.bm-btn--dl{
  background:transparent; color:var(--blue); border-color:#c9dcef;
  flex:0 0 48px; padding:13px;
}
.bm-btn--dl:hover{background:#eef4fb;}
.bm-btn svg{width:16px;height:16px;flex:0 0 auto;}

/* =====================================================
   پیشنهاد ادمین — چیپ مینیمال، یک خط، وسط‌چین در همه‌ی
   اندازه‌ها (هم موبایل هم دسکتاپ) طبق سلیقه‌ی خودت.
   ===================================================== */
.bm-mini{
  --navy:#0f2b46; --blue:#1c5fa8;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px;
  background:#eef4fb;
  border:1px solid #d3e3f4;
  border-radius:10px;
  padding:12px 16px;
  text-decoration:none;
  direction:rtl;
  font-family:'Dana',Tahoma,sans-serif;
  text-align:center;
  margin:0 0 15px 0;
  transition:background .15s ease, transform .15s ease;
}
.bm-mini:hover{ background:#e2edf9; }
.bm-mini:active{ transform:translateY(1px); }
.bm-mini__icon{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px;
  background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.bm-mini__icon svg{ width:13px; height:13px; }
.bm-mini__text{
  font-size:14px; color:#243b52; line-height:1.7;
}
.bm-mini__text b{ color:var(--navy); font-weight:800; }

/* =====================================================
   لیست «آهنگ‌های جدید این خواننده» — هدر مینیمالِ سرمه‌ای
   هم‌خانواده با بقیه‌ی بلوک‌ها (به‌جای mpb_head/h2 سایت که
   استایل قدیمی و بزرگ خودش رو تحمیل می‌کرد)، ردیف‌ها به شکل
   کارت با آیکن یکنواخت (بدون عکس = صفر درخواست شبکه‌ی اضافه)،
   عنوان کامل به‌عنوان anchor text برای سئو، و دکمه‌ی دانلود.
   ===================================================== */
.bm-relist-box{
  background:var(--cream, #f7f5f1);
  border:1px solid var(--line, #e6e2da);
  border-radius:12px;
  overflow:hidden;
  margin:0 0 15px 0;
}
.bm-relist-box .bm-relist__eyebrow{
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  background:var(--navy, #0f2b46) !important;
  padding:10px 16px;
  margin:0 !important;
}
.bm-relist-box .bm-relist__eyebrow span{
  color:#cfe0f2 !important; font-size:18px !important; font-weight:700 !important;
  font-family:'Dana',Tahoma,sans-serif;
}
.bm-relist-box .bm-relist__eyebrow svg{ width:15px; height:15px; color:#7fb2e6; flex:0 0 auto; }

.bm-relist{
  list-style:none !important; margin:0 !important; padding:12px !important;
  font-family:'Dana',Tahoma,sans-serif;
  display:flex; flex-direction:column; gap:10px;
}
.bm-relist li{
  list-style:none !important;
  display:flex !important; align-items:center; gap:10px;
  padding:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line, #e6e2da);
  direction:rtl;
  transition:border-color .15s ease, background .15s ease;
}
.bm-relist li:hover{ border-color:#c9dcef; background:#fbfdff; }
.bm-relist li:hover .bm-relist__title{ color:var(--blue, #1c5fa8); }

.bm-relist__row{
  display:flex !important; align-items:center; gap:12px;
  flex:1 1 auto; min-width:0;
  text-decoration:none !important;
  color:inherit;
}

.bm-relist__icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:11px;
  background:var(--blue, #1c5fa8); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.bm-relist__icon svg{ width:20px; height:20px; }

.bm-relist__body{ flex:1 1 auto; min-width:0; }
.bm-relist__title{
  display:block; font-size:15px; color:#243b52; font-weight:700; line-height:1.6;
  text-align:right !important;
  transition:color .15s ease;
}
.bm-relist__date{
  display:flex; align-items:center; gap:5px; margin-top:5px;
  font-size:12px; color:var(--slate, #6b7785);
}
.bm-relist__date svg{ width:12px; height:12px; flex:0 0 auto; }

.bm-relist__dl{
  flex:0 0 auto;
  display:flex; align-items:center; gap:6px;
  background:#eef4fb; color:var(--blue, #1c5fa8);
  border:1px solid #d3e3f4;
  font-size:13.5px; font-weight:700;
  padding:9px 14px; border-radius:9px;
  white-space:nowrap;
  text-decoration:none !important;
}
.bm-relist__dl svg{ width:14px; height:14px; flex:0 0 auto; }
.bm-relist li:hover .bm-relist__dl{ background:#e2edf9; }

@media (max-width:420px){
  .bm-relist li{ flex-wrap:wrap; }
  .bm-relist__dl{ order:3; width:100%; justify-content:center; margin-top:4px; }
}