/* متن وضعیت سبک */
.status{
  margin-top:6px;
  font-size:12px;
  color:#6b7280;
}

/* حالت لودینگ روی دکمه پخش */
.btnPlay.loading{
  position: relative;
  pointer-events: none;          /* تا کاربر دوباره کلیک نکند */
}
.btnPlay.loading::after{
  content:"";
  position:absolute;
  inset:auto auto -6px -6px;     /* گوشه پایین-چپ دکمه؛ اگر خواستی جاش رو عوض کن */
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.1);
  border-top-color:#00aacc;
  animation: spin .9s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* وقتی پخش همه فعال و در حال لود است، یک حالت پررنگ‌تر */
.playall.loading{
  filter: saturate(1.1) brightness(0.98);
  box-shadow: 0 6px 16px rgba(0,170,204,.36);
}

      .album-layout{display:flex;gap:16px;align-items:stretch}
      .album-layout .player-panel{
        position:sticky;top:12px;flex:0 0 340px;max-width:340px;
        border:1px solid #e5e7eb;border-radius:16px;padding:16px;background:#fff
      }
      .player-cover{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px}
      .player-meta{margin-top:10px}
      .player-title{font-weight:700;margin:0 0 4px;font-size:16px}
      .player-artist{color:#6b7280;font-size:13px;margin:0 0 8px}
/* سایز کلی آیکن‌ها و کمی افزایش پدینگ برای دقت لمس */
/* کنترل‌ها: وسط چین + یک خطی (nowrap) */
.controls{
  display:flex;
  justify-content:center;    /* وسط */
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;          /* نرو به خط بعد */
  overflow-x:hidden;         /* اگر خیلی تنگ شد، اسکرول حذف؛ پایین‌تر برای موبایل کنترل می‌کنیم */
}

/* اندازه آیکن‌ها و جلوگیری از شکست خط داخل دکمه */
.controls button{
  font-size:20px;            /* ← درخواست شما */
  padding:8px 12px;
  line-height:1;             /* مرکز هندسی ایموجی */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;        /* متن/ایموجی نشکند */
  flex:0 0 auto;             /* اجازه جمع‌شدن بدون شکستن خط */
}

      .controls button{
        border:1px solid #e5e7eb;border-radius:999px;background:#f9fafb;cursor:pointer
      }
      .controls button:disabled{opacity:.5;cursor:not-allowed}

      /* Progressbar (timeline) - LTR تا دستگیره از چپ به راست حرکت کند */
      .timeline{
        direction:ltr; appearance:none;width:100%;margin:8px 0;
        height:6px;background:#e5e7eb;border-radius:999px;outline:none
      }
      .timeline.progress-fill{
        background: linear-gradient(to right, #00aacc var(--p,0%), #e5e7eb var(--p,0%));
      }
      /* WebKit */
      .timeline::-webkit-slider-runnable-track{height:6px;background:transparent;border-radius:999px}
      .timeline::-webkit-slider-thumb{
        -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
        background:#00aacc;border:none;margin-top:-4px
      }
      /* Firefox */
      .timeline::-moz-range-track{height:6px;background:transparent;border-radius:999px}
      .timeline::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#00aacc;border:none}

      .playlist{flex:1;display:flex;flex-direction:column;gap:10px}
      .track{
        display:flex;gap:10px;padding:10px;border:1px solid #eee;border-radius:12px;background:#fff;cursor:pointer;
        transition: background-color .2s ease, border-color .2s ease;
      }
      .track.active{
        background:#bce3ff; /* کمرنگ و قابل تشخیص */
        border-color:#00aacc;
        box-shadow:0 0 0 2px rgba(0,170,204,.08)
      }
      .track img{width:56px;height:56px;border-radius:8px;object-fit:cover}
      .track .t-meta{display:flex;flex-direction:column;min-width:0}
      .track .t-title{font-weight:600;font-size:14px;white-space:normal;overflow:hidden;text-overflow:ellipsis}
      .track .t-artist{font-size:12px;color:#6b7280;white-space:normal;overflow:hidden;text-overflow:ellipsis}

      /* نوار بالا: «پخش همه» وسط چین */
.topbar{
  display:flex;
  flex-direction:column;     /* دکمه بالا/متن پایین، هر دو وسط */
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:8px;
}


   /* دکمه پخش همه — استایل مدرنِ پیل */
.playall{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;                 /* بیضی/پیل */
  border:1px solid #00aacc;            /* خط مرزی مینیمال */
  background: linear-gradient(180deg, #eaf9fc 0%, #dff5fa 100%); /* لطیف و مدرن */
  color:#007d91;                        /* متن آبی-سبز ملایم */
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,170,204,.08);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

/* هاور: کمی پررنگ‌تر و سایه‌ی نرم‌تر */
.playall:hover{
  background: linear-gradient(180deg, #ddf4f9 0%, #cff0f7 100%);
  color:#006678;
  box-shadow: 0 2px 8px rgba(0,170,204,.18);
}

/* کلیک لحظه‌ای (فیدبک tap/click) — از قبل در JS کلاس active اضافه/حذف می‌کنی */
.playall.active{
  transform: translateY(1px);
  background: linear-gradient(180deg, #c7edf6 0%, #b9e8f3 100%);
  border-color:#00aacc;
  color:#005864;
  box-shadow: 0 2px 10px rgba(0,170,204,.22);
}

/* وقتی پخشِ ناشی از پخش‌همه در جریان است */
.playall.playing{
  background: linear-gradient(180deg, #00b7d6 0%, #00a2bf 100%);
  border-color: #0099b5;
  color:#fff;
  box-shadow: 0 6px 16px rgba(0,170,204,.32);
}

/* فوکوس برای دسترسی‌پذیری */
.playall:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,170,204,.15),
    0 6px 16px rgba(0,170,204,.28);
}

/* نسخه‌ی فشرده برای موبایل خیلی باریک */
@media (max-width: 380px){
  .playall{ padding:8px 14px; }
}


/* استایل‌های اکولایزر */
.equalizer-container {
  width: 100%;
  height: 80px;
  margin: 16px 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.equalizer-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 100%, rgba(0, 170, 204, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.equalizer-canvas {
  width: 100%;
  height: 100%;
  display: block;
}


        
        /* بخش اقدامات در انتهای ردیف (سمت چپ در RTL) */
        .track .actions{
          margin-inline-start: auto;           /* در RTL می‌رود سمت چپ */
          display: flex; align-items: center;
        }
        
        /* دکمه دانلود */
        .btn-download{
          display:inline-flex; align-items:center; justify-content:center;
          padding:6px 20px; border-radius:999px; text-decoration:none;
          background:#00aacc; color:#fff !important; font-size:20px; border:1px solid #00aacc;
          transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
        }
        .btn-download:hover{ background:#0095b3; box-shadow:0 4px 12px rgba(0,170,204,.25); }
        .btn-download:active{ transform: translateY(1px); }
        
        /* دکمه ورود/ثبت‌نام — استایل مدرن پیل */
        .btn-auth {
          display:inline-flex; align-items:center; gap:8px;
          padding:9px 16px; border-radius:999px;
          border:1px solid #00aacc;
          background: linear-gradient(180deg, #eaf9fc 0%, #dff5fa 100%);
          color:#006b79; font-weight:600;
          box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,170,204,.08);
          transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
        }
        .btn-auth:hover{
          background: linear-gradient(180deg, #ddf4f9 0%, #cff0f7 100%);
          color:#005d69; box-shadow: 0 2px 8px rgba(0,170,204,.18);
        }
        .btn-auth:active{ transform: translateY(1px); }
        .btn-auth .ico {
          width:18px; height:18px; display:inline-block;
          background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>') center/contain no-repeat;
                  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>') center/contain no-repeat;
        }
        
        /* در موبایل دکمه جمع‌وجور بماند */
        @media (max-width: 480px){
          .btn-download{ padding:6px 10px; font-size:12px; }
        }

      @media (max-width: 992px){
        .album-layout{flex-direction:column}
        .album-layout .player-panel{position:relative;top:auto;max-width:100%;width:100%}
        .playlist{width:100%} /* تمام عرض در موبایل */
      }
      
      /* موبایل خیلی باریک: کمی فشرده‌تر تا باز هم یک خط بماند */
@media (max-width: 380px){
  .controls{ gap:6px; }
  .controls button{ padding:6px 10px; font-size:18px; } /* کمی کوچک‌تر، هنوز خوانا */
}

/* اگر خواستی در عرض‌های خیلی خیلی کم، به‌جای شکستن خط، اسکرول افقی ظریف داشته باشیم */
@media (max-width: 320px){
  .controls{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .controls::-webkit-scrollbar{ display:none; } /* اسکرول‌بار پنهان */
}
    
    
    /* VIP Modal */
    
       :root{
  --primary:#00a6b9;      /* آبی-سبز برند */
  --primary-2:#00c0d2;    /* روشن‌تر برای گرادیان */
  --accent:#22b573;       /* سبز تایید */
  --warning:#ff9800;      /* نارنجی دکمه‌ها */
  --text:#111; 
  --muted:#6b7280;
  --line:#e5e7eb;
  --soft:#f7f9fb;
}

/* ظرف لیست */
.plan-list{display:flex;flex-direction:column;gap:14px}

/* کارت هر پلن */
.plan-card{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-radius:14px;cursor:pointer;overflow:hidden;
  background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid var(--line);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
/* نوار رنگی ظریف در سمت راست (RTL) */
.plan-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; 
  background: linear-gradient(180deg,var(--primary) 0%,var(--primary-2) 100%);
  border-top-left-radius:14px; border-bottom-left-radius:14px;
  opacity:.55;
}
/* هاور: کمی بلند شود و روشن‌تر */
.plan-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,166,185,.15);
  border-color: rgba(0,166,185,.35);
  background: linear-gradient(180deg,#ffffff 0%,#f3fbfd 100%);
}

/* انتخاب‌شده: سبز و برجسته */
.plan-card.selected{
  border-color: rgba(34,181,115,.65);
  background: linear-gradient(180deg,#f6fffa 0%,#ecfff6 100%);
  box-shadow: 0 12px 28px rgba(34,181,115,.18);
}
.plan-card.selected::before{
  background: linear-gradient(180deg,#1bb36a 0%,#27c07a 100%);
  opacity:1;
}

/* اطلاعات پلن */
.plan-info{display:flex;flex-direction:column;gap:6px}
.plan-title{
  font-weight:800;font-size:16px;color:var(--text);letter-spacing:.2px;
  display:flex;align-items:center;gap:8px;
}
/* برچسب کوچک مدت پلن */
.plan-chip{
  font-weight:700;font-size:11px;color:#03636f;background:#e9fbfe;border:1px solid #c8f4f8;
  padding:3px 8px;border-radius:999px;
}

/* قیمت‌ها */
.plan-price{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.old-price{
  text-decoration:line-through;color:#9097a1;font-size:13px;
  background:#f1f2f4;border-radius:8px;padding:2px 8px;
}
.old-price.is-hidden{visibility:hidden}
.new-price{
  font-weight:900;font-size:18px;color:var(--text);
  background:linear-gradient(90deg,#111,#333);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* خط “سود شما …” */
.plan-save{
  font-size:12px;color:var(--muted);
  background:#f7fff9;border:1px dashed #b9ebcd;border-radius:8px;
  padding:4px 8px; display:inline-block; margin-top:4px;
}

/* کادر جمع مبلغ */
.total-box{
  text-align:center;font-weight:800;background:#ffffff;border:1px solid var(--line);
  padding:12px;border-radius:12px; margin-top:8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.total-sub{font-weight:600;color:var(--muted);margin-top:4px}

/* دکمه پرداخت */
#btnPayNow{
  background: linear-gradient(90deg, var(--warning), #ffb74d);
  border:none;color:#fff;font-weight:800;border-radius:12px;padding:10px 18px;
  box-shadow:0 10px 20px rgba(255,152,0,.25);
  transition: transform .1s ease, box-shadow .2s ease, filter .2s ease;
}
#btnPayNow:hover{ filter:saturate(1.1); box-shadow:0 12px 24px rgba(255,152,0,.28); }
#btnPayNow:active{ transform: translateY(1px); }

/* جای صحیحِ ضربدر داخل هدر مودال */
.modal-header{ position:relative; }
.modal-close{
  position:absolute;
  inset-block-start:10px;       /* بالا */
  inset-inline-end:12px;        /* سمت راست در LTR و سمت چپ در RTL */
  line-height:1;
  font-size:26px;
  color:#667085;
  opacity:.9;
}
.modal-close:hover{ color:#111; opacity:1; }

/* واکنش‌گرا */
@media (max-width:480px){
  .plan-card{padding:14px}
  .new-price{font-size:17px}
}


/* دکمه‌ی خود منو */
.usermenu-btn{
  background: linear-gradient(90deg,#00a6b9,#00c0d2);
  color:#fff !important;
  border:none;
  padding:8px 14px;
  border-radius:12px;
  font-weight:800;
  box-shadow:0 6px 14px rgba(0,166,185,.22);
  display:flex; align-items:center; gap:8px;
}
.usermenu-btn .greet{ white-space:nowrap; }
.usermenu-btn:hover{ filter:saturate(1.05); box-shadow:0 10px 20px rgba(0,166,185,.26); }

/* خود منو */
.usermenu{
  width: 100%;
  padding:8px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
}

/* آیتم وضعیت VIP */
.vip-status-li{
  padding:6px 8px;
}
.vip-status{
  display:flex; align-items:center; gap:10px;
  background:#f7fbfd;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
}
.vip-status.ok{ background:#f6fffa; border-color: rgba(34,181,115,.35); }
.vip-status.warn{ background:#fff9f3; border-color: rgba(255,152,0,.35); }

.vip-status .icon{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.06);
  font-size:14px;
}
.vip-status .txt{ flex:1; min-width:0; }
.vip-status .t1 {
    font-weight: 800;
    color: #111;
    line-height: 1.3;
    font-size: 12px;
    direction: rtl;
    text-align: right;
}
.vip-status .t2{ font-size:12px; color:#6b7280; margin-top:2px; }
.badge-pill{
  white-space:nowrap;
  font-size:11px; font-weight:800;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(34,181,115,.35);
  color:#1a9a62; background:#e9fff2;
}
.badge-pill.danger{
  border-color: rgba(255,152,0,.45);
  color:#a95900; background:#fff3e0;
}

/* لینک‌های منو */
.usermenu > li > a{
  border-radius:10px;
  font-weight:700;
  padding:8px 10px;
}
.usermenu > li > a:hover{
  background:#f3fbfd;
  color:#055a65;
}

/* جداکننده */
.usermenu .divider{
  margin:8px 4px;
  border-top:1px dashed #e5e7eb;
}



/* ===== VIP Overlay (Centered + Beautiful) ===== */
.vip-overlay{
  position:fixed; inset:0;
  display:none; /* با JS باز/بسته می‌شود */
  align-items:center; justify-content:center;
  padding:24px; z-index: 2000;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.9));
  backdrop-filter: saturate(1.15) blur(3px);
}

.vip-overlay-card{
  width:min(520px, 94%);
  max-height: 92vh; overflow:auto;
  background:#fff; border:1px solid #eceff3; border-radius:16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.12);
  padding:0;
  animation: vip-pop .24s cubic-bezier(.2,.7,.2,1) both;
  text-align: start;
  direction: rtl;
}
@keyframes vip-pop { from{transform:translateY(10px) scale(.98);opacity:0} to{transform:none;opacity:1} }

.vip-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  border-bottom:1px solid #f1f4f7;
  background: linear-gradient(180deg,#ffffff, #fbfdff);
  position: sticky; top: 0; z-index: 1;
}
.vip-ico{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:10px; background:#e6fbfe; color:#00afc2; font-size:20px;
}
.vip-title{ margin:0; font-weight:800; font-size:18px; color:#0f172a; }
.vip-badge{
  margin-inline-start:auto; font-size:12px; font-weight:800; color:#0284c7;
  background:#e0f2fe; padding:6px 10px; border-radius:999px;
}

.vip-body{ padding:14px 18px 8px; color:#475569; }
.vip-desc{ color:#6b7280; margin:6px 0 10px; line-height:1.8; }

.vip-list{ margin:8px 0 6px; padding:0; list-style:none; }
.vip-list li{
  display:flex; gap:8px; align-items:flex-start;
  padding:8px 0; border-bottom:1px dashed #eef2f6;
}
.vip-list li:last-child{ border-bottom:0; }
.vip-check{
  width:22px; height:22px; border-radius:6px; flex:0 0 auto;
  background:#ecfeff; color:#0ea5b0; display:grid; place-items:center; font-size:13px;
}

.vip-actions{
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  padding:12px 18px 16px; border-top:1px solid #f1f4f7;
}
.vip-btn, .vip-btn-secondary{
  appearance:none; border:none; cursor:pointer;
  border-radius:12px; font-weight:800; font-size:14px; line-height:1;
  padding:12px 16px; transition:.2s ease; transition-property:transform,box-shadow,filter,background;
}
.vip-btn{
  background:linear-gradient(90deg,#00a6b9,#00c0d2); color:#fff;
  box-shadow:0 10px 24px rgba(0,166,185,.28);
}
.vip-btn:hover{ transform:translateY(-1px); filter:saturate(1.06); }
.vip-btn:active{ transform:none; }

.vip-btn-secondary{
  background:#fff; color:#0f172a; border:1px solid #e5e7eb;
}
.vip-btn-secondary:hover{ background:#f8fafc; }
.vip-tip{ font-size:12px; color:#94a3b8; padding:0 18px 14px; }

/* کلید بستن شناور */
.vip-close{
  position:absolute; top:10px; inset-inline-end:10px;
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; color:#64748b; background:#f8fafc;
  border:1px solid #eef2f7; cursor:pointer; transition:all .2s ease;
}
.vip-close:hover{ background:#eef2f7; color:#0f172a; }

/* حالت تیره (در صورت نیاز) */
.dark .vip-overlay{ background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.dark .vip-overlay-card{ background:#0b1220; border-color:#172036; }
.dark .vip-head{ background:linear-gradient(180deg,#0b1220,#0e1626); border-bottom-color:#172036; }
.dark .vip-title{ color:#e2e8f0; }
.dark .vip-desc, .dark .vip-body{ color:#cbd5e1; }
.dark .vip-btn-secondary{ background:#0e1626; color:#e2e8f0; border-color:#1f2a44; }
.dark .vip-tip{ color:#94a3b8; }



/* نوار هشدار VIP */
.vip-need-box{
  direction: rtl;
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(90deg, #fff4f4, #ffecec);
  border:1px solid #ffd0d0;
  border-radius:12px;
  padding:10px 12px; 
  margin:10px 0 8px 0;
  box-shadow:0 6px 18px rgba(255,0,0,.06);
}
.vip-need-box .ico{
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #ffdede;
  font-size:16px;
}
.vip-need-box .txt{
  color:#b91c1c; font-weight:800; font-size:14px;
}
.vip-need-box .hint{
  color:#7f1d1d; font-size:12px; font-weight:600;
}

/* دکمه داخل نوار VIP */
.vip-need-actions{ margin-inline-start:auto; display:flex; gap:8px; }
.vip-need-btn{
  border:0;
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(90deg,#00a6b9,#00c0d2);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,166,185,.22);
  white-space:nowrap;
}
.vip-need-btn:hover{ filter:saturate(1.05); }


/* استایل مودال پرداختی‌ها (RTL) */
.payments-modal{ border-radius:14px; overflow:hidden; }
.payments-modal .modal-header{
  background:linear-gradient(90deg,#00a6b9,#00c0d2);
  color:#fff; border-bottom:none;
}
.payments-modal .modal-title{ font-weight:800; }
.pm-table{ direction:rtl; }
.pm-table thead th{
  background:#f7fbfd; border-bottom:1px solid #e5e7eb; font-weight:800; text-align:right;
}
.pm-table tbody td{ vertical-align:middle; }
.pm-table tr{ transition: background .15s ease; }
.pm-table tr:hover{ background:#f8feff; }
.pm-empty{
  direction:rtl; text-align:center; padding:20px;
  font-weight:700; color:#6b7280; border:1px dashed #e5e7eb; border-radius:12px;
}

/* منوی کاربر در nav کناری */
.nav-user-dropdown {
  position: relative;
}
.nav-user-dropdown .dropdown-menu {
  display: none;
  position: static;
  width: 90%;
  margin: 6px auto 0;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
  text-align: right;
  padding: 6px 0;
}
.nav-user-dropdown.open .dropdown-menu {
  display: block;
}
.nav-user-dropdown .dropdown-menu > li > a {
  display: block;
  padding: 8px 12px;
  color: #333;
  font-weight: 700;
}
.nav-user-dropdown .dropdown-menu > li > a:hover {
  background: #f7fbfd;
  color: #055a65;
}

.dropdown-menu button.dropdown-item {
  width: 100%;
  text-align: right;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: #333;
  font-weight: 700;
  cursor: pointer;
}

.dropdown-menu a.dropdown-item {
  width: 100%;
  text-align: right;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: #333;
  font-weight: 700 !important;
  cursor: pointer;
}
.dropdown-menu button.dropdown-item:hover {
  background: #f7fbfd;
  color: #055a65;
}

/* --- ظاهر منوی کاربر در منوی کناری --- */
#userDropdown {
  position: relative;
}
#userDropdown .usermenu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 90%;
  margin: auto;
  justify-content: flex-start;
}

/* آیکن کنار نام */
#userDropdown .usermenu-btn .icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* در حالت بسته بودن منوی اصلی (nav-xs): فقط آیکن نشان بده */
.nav-xs #userDropdown .usermenu-btn {
  justify-content: center;
  gap: 0;
  width: auto;
  padding: 10px;
}
.nav-xs #userDropdown .usermenu-btn .greet {
  display: none;
}
.nav-xs #userDropdown .usermenu-btn .icon {
  font-size: 18px;
}

/* جلوگیری از باز شدن خودکار هنگام hover */
#userDropdown:hover .dropdown-menu {
  display: none !important;
}
#userDropdown.open:hover .dropdown-menu {
  display: block !important;
}

/* --- استایل ورود / ثبت‌نام مثل سایر آیتم‌های منو --- */
#loginMenuItem .usermenu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 90%;
  margin: auto;
  justify-content: flex-start;
  border: none;
  background: transparent;
  color: #ccc;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
#loginMenuItem .usermenu-btn:hover {
  background: #1b1b1b;
  color: #fff;
}

/* آیکن در حالت عادی */
#loginMenuItem .usermenu-btn .icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* فقط آیکن در حالت بسته بودن منو */
.nav-xs #loginMenuItem .usermenu-btn {
  justify-content: center;
  gap: 0;
  width: auto;
  padding: 10px;
}
.nav-xs #loginMenuItem .usermenu-btn .greet { display: none; }
.nav-xs #loginMenuItem .usermenu-btn .icon { font-size: 18px; }

/* در حالت موبایل، متن منوها (از جمله ورود/ثبت‌نام) باید دیده شوند */
@media (max-width: 768px) {
  .nav-xs #loginMenuItem .usermenu-btn .greet,
  .nav-xs #userDropdown .usermenu-btn .greet {
    display: inline !important;
  }

  .nav-xs #loginMenuItem .usermenu-btn,
  .nav-xs #userDropdown .usermenu-btn {
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .nav-xs #loginMenuItem .usermenu-btn .icon,
  .nav-xs #userDropdown .usermenu-btn .icon {
    font-size: 16px !important;
  }
}

/* ===== Support Modal Styles ===== */
.support-modal{
  max-width: 520px;
  width: 96%;
  margin: 40px auto;
}
.support-card{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
  background: #fff;
}
.support-header{
  border-bottom: 1px solid #f1f4f7;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  padding: 12px 16px;
}
#supportTitle{
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  font-size: 16px;
}
.modal-close{
  font-size: 26px;
  color: #667085;
  opacity: .9;
}
.modal-close:hover{ color:#111; opacity:1; }

.support-body{
  padding: 16px 18px;
}
.support-row{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.support-ico{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #e6fbfe;
  color: #00afc2;
  font-size: 20px;
  flex: 0 0 auto;
}
.support-text{
  flex: 1;
  min-width: 0;
  color: #475569;
  line-height: 1.9;
  font-size: 14px;
}
.support-cta{
  margin-top: 10px;
}
.support-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg,#00a6b9,#00c0d2);
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,166,185,.28);
  font-weight: 800;
}
.support-btn:hover{
  filter: saturate(1.05);
  text-decoration: none;
}
.support-arrow{ font-size: 18px; }

.support-hint{
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

.support-footer{
  border-top: 1px solid #f1f4f7;
  padding: 10px 16px;
}
.support-close{
  border-radius: 12px;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
}

a[href^="https://t.me/"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,170,204,.15), 0 6px 16px rgba(0,170,204,.28);
  border-radius: 12px;
}


  /* کمک‌استایل‌های کوچک مودال */
  #authModal .hide{ display:none !important; }
  
  
/* ===== Playlist Modals - رفع کامل مشکل نمایش ===== */
/* بالاتر از pl-modal عمومی */
#plConfirmModal.pl-modal{
  position: fixed;      /* مطمئن */
  z-index: 100200;       /* بالاتر از مدال اصلی */
  inset: 0;             /* فول‌اسکرین اوورلی، اختیاری */
}

/* مدال اصلی */
.pl-modal {
  direction:rtl;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 23, 42, 0.45) !important;
  z-index: 99999 !important;
  padding: 20px !important;
  overflow-y: auto !important;
}

/* فقط وقتی display:flex دارد نمایش بده */
.pl-modal[style*="display: flex"],
.pl-modal[style*="display:flex"] {
  display: flex !important;
}

/* دیالوگ */
.pl-dialog {
  width: min(880px, 96vw) !important;
  max-height: 90vh !important;
  overflow: visible !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18) !important;
  position: relative !important;
  margin: auto !important;
  display: block !important;
}

/* دکمه بستن */
.pl-close {
  position: absolute !important;
  top: 10px !important;
  left: 12px !important;
  border: none !important;
  background: #f3f4f6 !important;
  color: #111 !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  z-index: 10 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.pl-close:hover {
  background: #e5e7eb !important;
}

/* تایتل */
.pl-title {
    text-align: right;
  margin: 0 !important;
  padding: 14px 16px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #111 !important;
  border-bottom: 1px solid #eef2f7 !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  display: block !important;
}

/* بادی */
.pl-body {
  padding: 14px 16px !important;
  display: block !important;
  overflow: visible !important;
}

.pl-body.two-col {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 14px !important;
}

/* ستون چپ */
.pl-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.pl-trackcard {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  background: #fafafa !important;
  display: block !important;
}

.pl-track-title {
  font-weight: 800 !important;
  color: #0f172a !important;
  font-size: 15px !important;
  display: block !important;
}

.pl-track-artist {
  color: #64748b !important;
  font-size: 13px !important;
  margin-top: 4px !important;
  display: block !important;
}

/* پیام‌ها - CRITICAL */
.pl-msg,
#plMsg,
.pl-new-note,
#plCreateMsg,
#plItemsMsg,
#plRenameMsg {
  font-size: 13px !important;
  color: #6b7280 !important;
  min-height: 18px !important;
  margin-top: 8px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1.5 !important;
}

/* دکمه‌ها */
.pl-primary,
.pl-secondary,
.pl-danger {
  border: none !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
}

.pl-primary {
  background: linear-gradient(90deg, #00a6b9, #00c0d2) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(0, 166, 185, 0.2) !important;
}
.pl-primary:hover {
  filter: saturate(1.05) !important;
  transform: translateY(-1px) !important;
}

.pl-secondary {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #e5e7eb !important;
}
.pl-secondary:hover {
  background: #f8fafc !important;
}

.pl-danger {
  background: #ef4444 !important;
  color: #fff !important;
}
.pl-danger:hover {
  background: #dc2626 !important;
}

/* بخش ایجاد جدید */
.pl-new {
  margin-top: 8px !important;
  border-top: 1px dashed #eef2f7 !important;
  padding-top: 10px !important;
  display: block !important;
}

.pl-new-title {
  font-weight: 800 !important;
  margin-bottom: 6px !important;
  color: #0f172a !important;
  display: block !important;
}

.pl-new-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.pl-new-row input {
  flex: 1 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-family: inherit !important;
  display: block !important;
}

/* ستون راست - لیست پلی‌لیست‌ها - CRITICAL */
.pl-right {
  display: flex !important;
  flex-direction: column !important;
  min-height: 260px !important;
  overflow: visible !important;
}

.pl-list {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: auto !important;
  max-height: 52vh !important;
  padding: 4px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #fff !important;
}

/* ردیف پلی‌لیست - CRITICAL */
.pl-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: #fff !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pl-row:last-child {
  margin-bottom: 0 !important;
}

.pl-row:hover {
  background: #f8fafc !important;
  border-color: #00a6b9 !important;
  transform: translateX(-2px) !important;
}

/* ردیف انتخاب‌شده */
.pl-row.selected {
  background: linear-gradient(135deg, #e6f9fd 0%, #d4f5fb 100%) !important;
  border-color: #00a6b9 !important;
  border-width: 2px !important;
  box-shadow: 0 4px 12px rgba(0, 166, 185, 0.15) !important;
  transform: scale(1.02) !important;
}

.pl-name {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: block !important;
  visibility: visible !important;
}

.pl-badge {
  font-size: 12px !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  display: inline-block !important;
  visibility: visible !important;
}

/* دکمه‌های اقدام */
.pl-actions {
  display: flex !important;
  gap: 6px !important;
  visibility: visible !important;
}

.pl-action {
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  visibility: visible !important;
}

.pl-action:hover {
  background: #f8fafc !important;
  border-color: #00a6b9 !important;
  transform: scale(1.1) !important;
}

/* پیام خالی */
.pl-empty {
  padding: 20px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  display: block !important;
  visibility: visible !important;
}

/* مدال آیتم‌ها */
.pl-items {
  max-height: 62vh !important;
  overflow: auto !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 4px !important;
  display: block !important;
  background: #fff !important;
}

.pli-row {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.2s ease !important;
}

.pli-row:last-child {
  border-bottom: none !important;
}

.pli-row:hover {
  background: #f8fafc !important;
}

.pli-title {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.pli-artist {
  color: #64748b !important;
  font-size: 13px !important;
}

.pli-actions .pli-del {
  border: 1px solid #fee2e2 !important;
  background: #fff !important;
  color: #ef4444 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}

.pli-actions .pli-del:hover {
  background: #fff5f5 !important;
  border-color: #ef4444 !important;
}

.pli-empty {
  padding: 20px !important;
  text-align: center !important;
  color: #94a3b8 !important;
}

/* مدال تأیید */
.pl-confirm-text {
  color: #0f172a !important;
  margin-bottom: 14px !important;
  line-height: 1.6 !important;
}

.pl-confirm-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

/* واکنش‌گرا */
@media (max-width: 768px) {
  .pl-body.two-col {
    grid-template-columns: 1fr !important;
  }

  .pl-dialog {
    width: 96vw !important;
    max-height: 95vh !important;
  }
}

/* Override any conflicting styles */
.pl-modal *,
.pl-modal *::before,
.pl-modal *::after {
  box-sizing: border-box !important;
}


/* Force visibility for critical elements */
#plListWrap,
#plListWrap *,
.pl-row,
.pl-name,
.pl-badge,
.pl-actions,
#plMsg,
#plCreateMsg {
  visibility: visible !important;
  opacity: 1 !important;
}

.pl-msg { display: none; }
.pl-msg.is-visible { display: block !important; }

 /* ==== Overlay & Card ==== */
  .vip-overlay {
    position: fixed; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(15,23,42,.45);
    z-index: 99999;
    padding: 20px;
  }
  .vip-overlay[style*="display: block"] { display: flex; }

  .vip-overlay-card {
    width: min(840px, 96vw);
    max-height: 92vh;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .18);
    overflow: hidden;
    position: relative;
  }

  /* Close */
  .vip-close {
    position: absolute; top: 10px; left: 12px;
    border: none; background: #f3f4f6; color: #111;
    border-radius: 10px; padding: 6px 10px; cursor: pointer;
    font-size: 18px; line-height: 1;
  }
  .vip-close:hover { background: #e5e7eb; }

  /* Head */
  .vip-head { display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid #eef2f7;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
  }
  .vip-ico { font-size: 20px; }
  .vip-title { margin: 0; font-size: 18px; font-weight: 800; color: #111; }

  /* Body as Grid */
  .vip-body {
    display: grid;
    grid-template-columns: 1fr 1fr;    /* desktop: two columns */
    grid-template-areas:
      "form list";
    gap: 16px;
    align-items: start;
    padding: 14px 16px;
  }
  /* Full-row desc */
  #plDesc { grid-column: 1 / -1; margin-bottom: 6px; color: #475569; }

  /* Areas */
  #plFormWrap { grid-area: form; }
  #plListWrap { grid-area: list; }

  /* List styles */
  .vip-list-wrap { min-height: 260px; }
  .vip-list {
    list-style: none; margin: 0; padding: 6px;
    border: 1px solid #e5e7eb; border-radius: 12px;
    max-height: 52vh; overflow: auto; background: #fff;
  }
  .vip-empty { color: #9ca3af; font-size: 13px; margin-top: 6px; }

  /* Form styles */
  .vip-form-row { display: flex; gap: 8px; align-items: center; }
  .vip-input {
    flex: 1; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 10px 12px; font-family: inherit;
  }
  .vip-msg { font-size: 12px; margin-top: 6px; color: #6b7280; display: none; }
  .vip-msg.is-visible { display: block !important; }
  .vip-msg.is-success { color: #0f766e !important; }
  .vip-msg.is-error   { color: #ef4444 !important; }
  .vip-msg.is-warning { color: #d97706 !important; }

  /* Footer actions */
  .vip-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 12px 16px; border-top: 1px solid #eef2f7;
  }
  .vip-btn, .vip-btn-secondary {
    border: none; cursor: pointer; border-radius: 10px;
    padding: 10px 14px; font-weight: 800; font-size: 14px;
    transition: all .2s ease;
  }
  .vip-btn {
    background: linear-gradient(90deg, #00a6b9, #00c0d2);
    color: #fff; box-shadow: 0 10px 20px rgba(0, 166, 185, .2);
    white-space: nowrap;
  }
  .vip-btn:hover { filter: saturate(1.05); transform: translateY(-1px); }
  .vip-btn-secondary { background: #fff; color: #111; border: 1px solid #e5e7eb; }
  .vip-btn-secondary:hover { background: #f8fafc; }

  .vip-tip { margin: 0; padding: 0 16px 14px; color: #64748b; font-size: 12px; }

  /* Responsive */
  @media (max-width: 768px) {
    .vip-overlay-card { width: 96vw; max-height: 94vh; }
    .vip-body {
      grid-template-columns: 1fr;      /* mobile: single column */
      grid-template-areas:
        "list"
        "form";
    }
    .vip-list { max-height: 40vh; }
    
  }
  
/* کانتینر اکشن‌ها */
.actions{
  display: flex;
  align-items: center;
  gap: 10px;            /* فاصله بین + و دانلود */
}

/* دکمه افزودن: مربع با گوشه‌های نرم */
.btn-add-pl{
  --plg1:#00a6b9; --plg2:#00c0d2; --plshadow: rgba(0,166,185,.25);
  width: 37px;
  height: 37px;
  border-radius: 10px;   /* مربع با کمی گردی */
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--plg1), var(--plg2));
  box-shadow: 0 6px 16px var(--plshadow);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-add-pl:hover{ transform: translateY(-1px); filter: saturate(1.1); box-shadow: 0 10px 22px var(--plshadow); }
.btn-add-pl:active{ transform: translateY(0) scale(.98); filter: brightness(.98); }
.btn-add-pl:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(0,192,210,.25), 0 6px 16px var(--plshadow); }

.btn-add-pl{
  /* همان استایل‌های بالا... */
  margin-inline-end: 10px;  /* در RTL/LTR درست کار می‌کند */
}

.album-layout.onecol{flex-direction:column;}
.album-layout.onecol .player-panel{position:relative;top:auto;max-width:100%;width:100%}
.album-layout.onecol .playlist{width:100%}

/* Login Required Modal */
.lr-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(17,24,39,.6);z-index:1060}
.lr-card{width: min(92vw,520px);background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);padding:20px 18px 16px;direction:rtl}
.lr-close{position:absolute;top:10px;left:12px;border:0;background:transparent;font-size:18px;line-height:1;cursor:pointer;opacity:.65}
.lr-close:hover{opacity:1}
.lr-head{display:flex;align-items:center;gap:10px;margin:4px 6px 10px}
.lr-ico{font-size:22px}
.lr-title{font-size:18px;margin:0}
.lr-body{margin:0 6px 12px;color:#374151;font-size:14px;line-height:1.8}
.lr-actions{display:flex;gap:10px;justify-content:flex-start;padding:6px 6px 0}
.lr-btn{background:#0ea5b7;border:0;color:#fff;padding:8px 14px;border-radius:10px;cursor:pointer;box-shadow:0 4px 14px rgba(14,165,183,.25)}
.lr-btn:hover{filter:brightness(1.06)}
.lr-btn-secondary{background:#eef2f7;border:0;color:#111827;padding:8px 14px;border-radius:10px;cursor:pointer}
@media (prefers-color-scheme: dark){
  .lr-card{background:#0b1220;color:#e5e7eb}
  .lr-btn-secondary{background:#0f172a;color:#e5e7eb}
}

/* ظرف پیام‌های مدال پلی‌لیست */
#plMsg, #plCreateMsg{display:block;visibility:visible;min-height:0;padding:6px 0}

/* استایل پیام محدودیت VIP */
#plMsg .vip-limit-msg, #plCreateMsg .vip-limit-msg{display:flex;align-items:center;gap:10px;background:#fff7ed;border:1px solid #fdba74;border-radius:12px;padding:10px 12px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
#plMsg .vip-limit-icon, #plCreateMsg .vip-limit-icon{font-size:18px}
#plMsg .vip-limit-text, #plCreateMsg .vip-limit-text{flex:1;color:#9a3412;font-size:14px;line-height:1.8}
#plMsg .vip-limit-btn, #plCreateMsg .vip-limit-btn{background:#0ea5b7;border:0;color:#fff;padding:6px 12px;border-radius:10px;cursor:pointer;white-space:nowrap}
#plMsg .vip-limit-btn:hover, #plCreateMsg .vip-limit-btn:hover{filter:brightness(1.06)}
@media (prefers-color-scheme: dark){
  #plMsg .vip-limit-msg, #plCreateMsg .vip-limit-msg{background:#1f2937;border-color:#374151}
  #plMsg .vip-limit-text, #plCreateMsg .vip-limit-text{color:#e5e7eb}
}


/* همه‌چیز فقط داخل همین باکس اعمال می‌شود */
.item.pos-rlt .dl-card{
  display:inline-block;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(180deg,#1c2130,#151b28);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}

.item.pos-rlt .dl-row{
  display:inline;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* دکمه‌ها */
.item.pos-rlt #dllink,
.item.pos-rlt .btn-fav{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(91,140,255,.18), rgba(168,107,253,.18));
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.item.pos-rlt #dllink:hover,
.item.pos-rlt .btn-fav:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 8px 20px rgba(91,140,255,.25);
}

/* دانلود پررنگ‌تر */
.item.pos-rlt #dllink{
  background:linear-gradient(135deg,#5b8cff,#a86bfd);
  box-shadow:0 10px 24px rgba(91,140,255,.35);
}

/* آیکن‌ها */
.item.pos-rlt .icon{width:18px;height:18px;display:inline-block}

/* علاقمندی‌ها */
.item.pos-rlt .btn-fav{cursor: pointer; background:linear-gradient(87deg, rgb(255 0 0 / 30%), rgb(255 0 0 / 4%))}
.item.pos-rlt .btn-fav.active{
  background:linear-gradient(135deg,#ff6b6b,#f06595);
  box-shadow:0 10px 24px rgba(240,101,149,.35);
}

/* دکمه «پخش» برجسته و شیک */
.pl-actions .pl-play{
  background: linear-gradient(135deg,#10b981,#059669);
  color:#bf7e7e;
  font-weight:600;
  padding:6px 10px;
  border-radius:8px;
  margin:0 6px;
  box-shadow:0 2px 6px rgba(16,185,129,.3);
  text-decoration:none;
  text-align: center;
  display:inline-block;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.pl-actions .pl-play:hover{
  transform: translateY(-1px);
  box-shadow:0 4px 10px rgba(16,185,129,.4);
  opacity:.95;
}
[dir="rtl"] .pl-actions .pl-play{ margin-left:0; margin-right:6px; }

/* === Mini Toast for "added to playlist" === */
.pl-toast-card{
  width: min(520px, 92vw) !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.14) !important;
  overflow: hidden !important;
}

.pl-toast-text{
  padding: 12px 14px !important;
  color: #0f172a !important;
  line-height: 1.9 !important;
  font-size: 14px !important;
}

.pl-toast-row{ display: flex; align-items: center; gap: 10px; }
.pl-toast-ico{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
               background:#e6fbfe; color:#00afc2; font-weight:800; }

/* --- VIP Overlay final override (keep it at the very end) --- */
.vip-overlay{ z-index: 99999 !important; }
.vip-close{ z-index: 3; } /* دکمه ضربدر همیشه رو باشد */

/* ===== Horizontal album strip (modern) ===== */
/* ===== Horizontal album strip (modern, RTL-first via flip) ===== */
.album-strip-wrap {
  position: relative;
  margin: 8px 0;
}

/* به‌جای row-reverse از Flip استفاده می‌کنیم */
.album-strip {
  direction: ltr;                 /* منطق اسکرول استاندارد */
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 12px;
  -webkit-overflow-scrolling: touch;

  transform: scaleX(-1);          /* نوار را افقی برعکس کن تا آیتم اول سمت راست دیده شود */
}

.album-strip::-webkit-scrollbar { height: 8px; }
.album-strip::-webkit-scrollbar-thumb { background: #cfd3da; border-radius: 8px; }

/* هر کارت را دوباره برعکس می‌کنیم تا محتوا نرمال دیده شود */
.album-card {
  flex: 0 0 auto;
  width: 132px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;

  transform: scaleX(-1);          /* برگشت از فلـیپ برای محتوا */
}

.album-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1/1;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  background: #f3f5f8;
}

.album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.album-card:hover .album-thumb img { transform: scale(1.04); }

.album-title {
  margin-top: 8px;
  font-size: .92rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-align: center;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-year-badge {
  position: absolute;
  left: 10px; bottom: 10px;
  bottom: 8px;
  font-size: .92rem;
  padding: .22rem .55rem;
  font-weight: 700;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  backdrop-filter: saturate(140%) blur(4px);
}

/* Nav buttons */
.album-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.album-nav:disabled { opacity: .5; cursor: default; }
.album-nav svg { width: 20px; height: 20px; }
.album-nav.left  { left: -6px; }
.album-nav.right { right: -6px; }

/* وقتی اسکرول لازم نیست، دکمه‌ها مخفی شوند */
.album-strip-wrap.no-overflow .album-nav { display: none; }

@media (max-width: 576px) {
  .album-card { width: 120px; }
  .album-nav.left  { left: -4px; }
  .album-nav.right { right: -4px; }
}


/* کادر نتایج لحظه‌ای */
/* والد مشترک: مرجع پوزیشن */
.search-wrap { position: relative; }


.search-wrap--desktop { display: inline-block; }
@media (min-width: 768px){
  .search-wrap--desktop { width: 300px;max-height: 53px; }   /* همان input-s-lg قدیم */
}
@media (max-width: 767.98px){
  #search_mobile_wrap { padding: 0 15px; }  /* جلوگیری از چسبیدن به لبه‌ها */
  .modern-search-form { box-sizing: border-box; }
}

/* فرم مدرن: زمینه سفید، گوشه‌گرد */
.modern-search-form{
  position: relative; display:flex; align-items:center;
  background:#fff; border:1px solid #d9d9d9; border-radius:14px;
  padding:8px 44px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.modern-search-form:focus-within{ border-color:#FFB500; box-shadow:0 0 0 3px rgba(255,181,0,.15); }
.msf-input{ flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0; color:#222; font-size:14px; }
.msf-icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#9a9a9a; }
.msf-clear{ position:absolute; left:40px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:#777; font-size:18px; }
.msf-submit{ position:absolute; left:8px; top:50%; transform:translateY(-50%); background:#f5f5f5; border:1px solid #d9d9d9; width:28px; height:28px; border-radius:8px; color:#444; }

/* DROPDOWN: دیگر هم‌عرض فرم نیست */
.live-search{
  position:absolute;
  top: calc(100% + 6px);
  /* نکته مهم: روی دسکتاپ به راستِ فرم می‌چسبد ولی می‌تواند از عرض فرم بزرگ‌تر باشد */
  left: auto;
  /* عرض تطبیقی: نه خیلی کوچک، نه تمام‌صفحه */
  width: min(640px, calc(100vw - 40px));   /* دسکتاپ: حداکثر 640px، حداقل 40px فاصله از کناره‌های صفحه */
  z-index: 9999;
  background:#111; border:1px solid #2a2a2a; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.35);
  padding:8px 0; /*max-height:70vh;*/ overflow:auto; direction:rtl;
}
.live-search.hidden{ display:none; }

/* در موبایل: عرض مطابق viewport منهای padding ظرف (30px) و هم‌مرکز */
@media (max-width: 767.98px){
  #search_mobile_wrap .live-search{
    right: 15px; left: 15px; width: auto; max-height:70vh;  /* از دو طرف 15px فاصله، NO overflow */
  }
}

/* شبکه ستون‌ها: به‌جای عدد ثابت، auto-fit تا فشرده نشود */
.live-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:8px; padding:6px 8px 10px;
}
@media (max-width: 480px){ .live-grid{ grid-template-columns: 1fr; } }

/* بقیه استایل همان قبلی */
.live-col{ background:transparent; border-left:1px solid rgba(255,255,255,.06); padding-left:8px; min-width:0; }
.live-col:first-child{ border-left:0; padding-left:0; }
.live-title{ font-size:13px; color:#bbb; padding:0 6px 6px; display:flex; align-items:center; gap:6px; }
.live-title .dot{ width:6px; height:6px; border-radius:50%; background:#FFB500; display:inline-block; }
.live-items{ list-style:none; margin:0; padding:0; }
.live-item a{ display:flex; align-items:center; gap:10px; padding:8px 6px; color:#eee; text-decoration:none; border-radius:8px; }
.live-item a:hover, .live-item.is-active a{ background:rgba(255,255,255,.06); }
.live-thumb{ width:38px; height:38px; border-radius:8px; object-fit:cover; background:#222; flex:0 0 38px; }
.live-meta{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.live-name{ font-size:14px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-sub{ font-size:12px; color:#aaa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-empty, .live-loading, .live-error{ padding:14px; text-align:center; color:#aaa; font-size:13px; }
.live-more{ display:block; text-align:center; padding:9px 10px; margin:8px 6px 0; border-radius:10px; background:#1a1a1a; color:#FFB500; text-decoration:none; font-weight:600; border:1px solid rgba(255,181,0,.25); }
.live-more:hover{ background:#232323; }


/* === آیکون‌های SVG و ظاهر مدرن پلیر (فقط برای پلیر آلبوم) === */

/* === Modern Player Styles for album-layout === */

/* باکس پلیر کارت‌مانند */
.album-layout .player-panel{
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  padding: 14px 14px 16px;
}

/* تیترها */
.album-layout .player-title{
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 4px;
}
.album-layout .player-artist{
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 10px;
}

/* --- تایم‌لاین ضخیم و مدرن --- */
.album-layout .timeline{
  direction:ltr;
  appearance:none;
  width:100%;
  margin:10px 0 6px;
  height:10px;
  border-radius:999px;
  background:#e5e7eb;
  outline:none;
  cursor:pointer;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
}
.album-layout .timeline.progress-fill{
  background: linear-gradient(to right,#00aacc var(--p,0%), #e5e7eb var(--p,0%));
}
.album-layout .timeline::-webkit-slider-runnable-track{
  height:10px;
  background:transparent;
  border-radius:999px;
}
.album-layout .timeline::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#00aacc;
  border:2px solid #f9fafb;
  margin-top:-5px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.album-layout .timeline::-moz-range-track{
  height:10px;
  background:transparent;
  border-radius:999px;
}
.album-layout .timeline::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#00aacc;
  border:2px solid #f9fafb;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* زمان‌ها */
.album-layout .duration,
.album-layout .currentTime{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 11px;
  letter-spacing: .02em;
}

/* --- کنترل‌ها --- */
.album-layout .controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  margin-top:10px;
}

/* پایه دکمه‌ها: متن ایموجی مخفی، SVG جایگزین */
.album-layout .controls button{
  position:relative;
  border:0;
  border-radius:999px;
  background:#f3f4f6;
  padding:9px 12px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(15,23,42,.06);
  transition:
    transform .12s ease,
    box-shadow .18s ease,
    background .18s ease;
  font-size:0;       /* متن دیده نشود */
  color:transparent;
}
.album-layout .controls button:hover{
  background:#e5e7eb;
  box-shadow:0 6px 16px rgba(15,23,42,.10);
  transform: translateY(-1px);
}
.album-layout .controls button:active{
  transform: translateY(0);
  box-shadow:0 3px 8px rgba(15,23,42,.14);
}

/* آیکون داخل دکمه */
.album-layout .controls button::before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 22px;
}

/* --- Play / Pause با دو SVG مختلف --- */

/* حالت پیش‌فرض: Play (دایره آبی با مثلث سفید) */
.album-layout .controls .btnPlay{
  padding:10px 18px;
  box-shadow:0 10px 24px rgba(0,166,185,.40);
}
.album-layout .controls .btnPlay::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2300A6B9'/%3E%3Cpolygon points='10,8 10,16 16,12' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* وقتی در حال پخش است: Pause (دو میله سفید) */
.album-layout .controls .btnPlay.is-playing::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2300A6B9'/%3E%3Crect x='9' y='8' width='2.5' height='8' fill='%23FFFFFF'/%3E%3Crect x='12.5' y='8' width='2.5' height='8' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* بعدی و قبلی */
.album-layout .controls .btnNext::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='16' y='7' width='2' height='10' fill='%234B5563'/%3E%3Cpolygon points='6,7 6,17 15,12' fill='%234B5563'/%3E%3C/svg%3E");
}
.album-layout .controls .btnPrev::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='7' width='2' height='10' fill='%234B5563'/%3E%3Cpolygon points='18,7 18,17 9,12' fill='%234B5563'/%3E%3C/svg%3E");
}

/* --- Shuffle: دو فلش ضربدری کلاسیک --- */
/* --- آیکون جدید Shuffle (دو فلش ضربدری با سر در سمت راست) --- */
.album-layout .controls .btnShuffle::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h3.5c1.1 0 2.1.5 2.8 1.4l2 2.7c.5.7 1.3 1.1 2.1 1.1H18' fill='none' stroke='%234B5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 17h3.5c1.1 0 2.1-.5 2.8-1.4l2-2.7c.5-.7 1.3-1.1 2.1-1.1H18' fill='none' stroke='%234B5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='18,5 20,7 18,9' fill='none' stroke='%234B5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='18,15 20,17 18,19' fill='none' stroke='%234B5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- آیکون جدید Repeat (فلش خمیده برگشتی مثل تصویر) --- */
.album-layout .controls .btnRepeat::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8h6a4 4 0 0 1 0 8H9' fill='none' stroke='%234B5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='9,6 6,8.5 9,11' fill='none' stroke='%234B5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* حالت روشن شافل/ریپیت وقتی کلاس is-on روی دکمه است */
.album-layout .controls .btnShuffle.is-on,
.album-layout .controls .btnRepeat.is-on{
  background:rgba(0,166,185,.08);
  box-shadow:0 0 0 1px rgba(56,189,248,.35);
}

/* --- دکمه «پخش همه» مدرن با آیکون --- */
.album-layout .topbar{
  margin-top:8px;
  display:flex;
  justify-content:flex-start;
}
.album-layout .btnPlayAll.playall{
  border:0;
  border-radius:999px;
  padding:7px 14px 7px 18px;
  font-size:13px;
  font-weight:600;
  background:linear-gradient(135deg,#00a6b9,#00c0d2);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,166,185,.35);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.album-layout .btnPlayAll.playall:hover{
  filter:brightness(1.05);
  box-shadow:0 10px 24px rgba(0,166,185,.4);
  transform:translateY(-1px);
}
.album-layout .btnPlayAll.playall:active{
  transform:translateY(0);
  box-shadow:0 5px 14px rgba(0,166,185,.35);
}

/* آیکون داخل Play All */
.album-layout .btnPlayAll.playall::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23FFFFFF' fill-opacity='0.15'/%3E%3Cpolygon points='10,8 10,16 16,12' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* موبایل */
@media (max-width:480px){
  .album-layout .controls{
    gap:8px;
  }
  .album-layout .controls button{
    padding:7px 10px;
  }
  .album-layout .timeline{
    height:8px;
  }
}

/* ===== Manual VIP Card Payment Modal ===== */

.manualpay-card{
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 48px rgba(0,0,0,.16);
  overflow: hidden;
}

.manualpay-body{
  padding: 16px 18px 10px;
}

.mp-cardbox{
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg,#0f172a,#111827);
  color: #e5e7eb;
  margin-bottom: 14px;
}

.mp-label{
  font-size: 12px;
  opacity: .8;
}

.mp-card-num{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  font-family: monospace;
}

.mp-card-name{
  margin-top: 4px;
  font-size: 13px;
  opacity: .9;
}

.mp-planbox{
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: #f9fafb;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.mp-plan-title{
  font-weight: 800;
  color: #111827;
  margin-bottom: 4px;
}

.mp-plan-price{
  font-size: 13px;
  color: #6b7280;
}

.vip-manual-done-title{
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
  margin-bottom: 6px;
  color: #111827;
}

/* radio btn in play.php */
.radio-btn{
    direction: rtl;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #ff0055, #2f427a);
    border-radius: 50px;
    position: relative;
    animation: blink 2s infinite;
    box-shadow: 0 0 20px rgba(255,0,90,.8);
    transition: transform .3s ease;
}

.radio-btn .icon{
    font-size: 18px;
}

/* افکت چشمک زن واقعی */
@keyframes blink{
    0%{
        opacity: 1;
        box-shadow: 0 0 10px rgba(255,0,90,.4);
    }
    50%{
        opacity: .4;
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    100%{
        opacity: 1;
        box-shadow: 0 0 20px rgba(255,0,120,1);
    }
}

.radio-btn:hover{
    animation: none;
    transform: scale(1.07);
    box-shadow: 0 0 30px rgba(255,0,120,1);
}
/*//////*/

/* پیام‌ها */
#mpMsg.text-success{
  color: #16a34a !important;
}
#mpMsg.text-danger{
  color: #ef4444 !important;
}

/* کمی ریسپانسیو */
@media (max-width: 480px){
  .manualpay-card{
    border-radius: 14px;
  }
  .mp-card-num{
    font-size: 16px;
    letter-spacing: 1px;
  }
}


/* اگر margin-inline-* پشتیبانی نشد: */
html[dir="rtl"] .btn-add-pl{ margin-left: 10px; }
html[dir="ltr"] .btn-add-pl{ margin-right: 10px; }