/* === Local fonts (Naab3da/fonts) === */
@font-face{
  font-family:'VazirmatnLocal';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/wp-content/themes/Naab3da/fonts/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'VazirmatnLocal';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/wp-content/themes/Naab3da/fonts/Vazirmatn-Bold.woff2') format('woff2');
}

/* از فونت‌های لوکال استفاده کن */
:root{
  --app-font:'VazirmatnLocal', Tahoma, sans-serif;
  /* پیش‌فرض رنگ‌ها اگر جایی ست نشده */
  --player-accent:   #d4a017;
  --player-accent-2: #d4a017;
  --player-empty:    #6f6f6f;
}

/* پایه */
body{ margin:0; background:#222; color:#fff; font-family:var(--app-font); }

.player{
  direction:ltr;
  width:750px;
  height:80px;
  background:#333;
  border-radius:16px;
  padding:5px 20px;
  box-sizing:border-box;
  display:flex; align-items:center; gap:14px;
  font-family:var(--app-font);
  position:relative;
  margin:1rem auto;
}

.btn{ background:none; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; position:relative; }
.btn svg{ fill:none; stroke:#fff; display:block; }

/* Tooltip */
.btn[data-tip]::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translate(-50%,6px);
  background:#fff; color:#111; font-family:var(--app-font);
  direction:rtl; text-align:center; font-size:12px; padding:6px 10px; border-radius:8px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:.18s ease; z-index:10;
}
.btn[data-tip]::before{
  content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#fff; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));
  opacity:0; transition:.18s ease;
}
.btn[data-tip]:hover::after,
.btn[data-tip]:hover::before{ opacity:1; transform:translate(-50%,0); }

.center-controls{ display:flex; align-items:center; gap:8px; width:auto; flex-shrink:0; white-space:nowrap; }
.play-circle{ width:45px; height:45px; }
.prevnext svg{ width:25px; height:25px; }

.progress-wrap{ flex:1; display:flex; align-items:center; gap:10px; min-width:200px; }
.time{ font-size:13px; color:#ddd; min-width:40px; text-align:center; font-weight:500; direction:rtl; }

/* ===== Soft-line Progress + Vertical Marker (center-aligned) ===== */
.modern-player{
  --range-h: 6px;
  --range-thumb: 12px;
  --mp-thumb-border: 2px;

  /* می‌تونی رنگ و ضخامت مارکر رو از اینجا عوض کنی */
  --mp-marker: rgba(255,255,255,.65); /* رنگ خط عمودی نرم */
  --mp-marker-w: 1px;                 /* پهنای خط عمودی */
}

.modern-player input[type="range"]{
  /* رنگ‌ها/متغیرها */
  --mp-fill:  var(--player-accent-2, #d4a017);
  --mp-empty: var(--player-empty, #6f6f6f);
  --mp-soft:  rgba(212,160,23,.35);   /* خط سافت افقی */
  --mp-soft-h: 2px;
  --mp-pct: 0%;
  --mp-thumb-half: calc((var(--range-thumb) + var(--mp-thumb-border)) / 2);

  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:var(--range-h);
  border-radius:999px;
  outline:none;

  /* چهار لایه: fill | marker | soft | empty */
  background:
    linear-gradient(to right, var(--mp-fill),  var(--mp-fill)) no-repeat,
    linear-gradient(to right, var(--mp-marker), var(--mp-marker)) no-repeat,
    linear-gradient(to right, var(--mp-soft),  var(--mp-soft)) no-repeat,
    linear-gradient(to right, var(--mp-empty), var(--mp-empty)) no-repeat !important;

  background-size:
    /* فیل تا زیر مرکز شَستی */
    max(0px, calc(var(--mp-pct) - var(--mp-thumb-half))) 100%,
    /* مارکر عمودی باریک */
    var(--mp-marker-w) 100%,
    /* سافت از بعدِ مرکز شَستی تا انتها */
    max(0px, calc(100% - (var(--mp-pct) + var(--mp-thumb-half)))) var(--mp-soft-h),
    100% 100% !important;

  background-position:
    left center,
    calc(var(--mp-pct) + var(--mp-thumb-half)) center,
    calc(var(--mp-pct) + var(--mp-thumb-half)) center,
    left center !important;
}

/* WebKit/Chromium track */
.modern-player input[type="range"]::-webkit-slider-runnable-track{
  height:var(--range-h);
  border-radius:999px;
  background:
    linear-gradient(to right, var(--mp-fill),  var(--mp-fill)) no-repeat,
    linear-gradient(to right, var(--mp-marker), var(--mp-marker)) no-repeat,
    linear-gradient(to right, var(--mp-soft),  var(--mp-soft)) no-repeat,
    linear-gradient(to right, var(--mp-empty), var(--mp-empty)) no-repeat !important;

  background-size:
    max(0px, calc(var(--mp-pct) - var(--mp-thumb-half))) 100%,
    var(--mp-marker-w) 100%,
    max(0px, calc(100% - (var(--mp-pct) + var(--mp-thumb-half)))) var(--mp-soft-h),
    100% 100% !important;

  background-position:
    left center,
    calc(var(--mp-pct) + var(--mp-thumb-half)) center,
    calc(var(--mp-pct) + var(--mp-thumb-half)) center,
    left center !important;
}

/* WebKit/Chromium thumb */
.modern-player input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:var(--range-thumb);
  height:var(--range-thumb);
  border-radius:50%;
  background:var(--player-accent);
  border:var(--mp-thumb-border) solid var(--player-accent);
  cursor:pointer;
  margin-top:calc((var(--range-h) - var(--range-thumb))/2);
}

/* Firefox track */
.modern-player input[type="range"]::-moz-range-track{
  height:var(--range-h);
  border-radius:999px;
  background:
    linear-gradient(to right, var(--mp-fill),  var(--mp-fill)) no-repeat,
    linear-gradient(to right, var(--mp-marker), var(--mp-marker)) no-repeat,
    linear-gradient(to right, var(--mp-soft),  var(--mp-soft)) no-repeat,
    linear-gradient(to right, var(--mp-empty), var(--mp-empty)) no-repeat !important;

  background-size:
    max(0px, calc(var(--mp-pct) - var(--mp-thumb-half))) 100%,
    var(--mp-marker-w) 100%,
    max(0px, calc(100% - (var(--mp-pct) + var(--mp-thumb-half)))) var(--mp-soft-h),
    100% 100% !important;

  background-position:
    left center,
    calc(var(--mp-pct) + var(--mp-thumb-half)) center,
    calc(var(--mp-pct) + var(--mp-thumb-half)) center,
    left center !important;
}
.modern-player input[type="range"]::-moz-range-progress{ background:transparent; height:var(--range-h); border-radius:999px; }
.modern-player input[type="range"]::-moz-range-thumb{
  width:var(--range-thumb);
  height:var(--range-thumb);
  border:none;
  border-radius:50%;
  background:var(--player-accent);
  cursor:pointer;
}

/* فقط ولوم: خط سافت خاموش، اما مارکر می‌تونه بمونه یا حذف شه */
#volumeRange{ --mp-soft: transparent; --mp-soft-h: 0px; }


.volume-wrap{ display:flex; align-items:center; gap:6px; min-width:110px; }
.volume-range{ width:80px; }

.playlist-panel{
  position:absolute; left:16px; right:16px; bottom:calc(100% + 10px);
  background:#2d2d2d; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:none; max-height:300px; overflow:auto; z-index:20; direction:rtl;
}
.playlist-header{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); font-weight:700; font-size:14px; }
.track{ display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; font-size:14px; }
.track:hover{ background:#262626; }
.track.active{ background:rgba(10,132,255,.15); }
.track .idx{ width:22px; text-align:center; color:#bbb; font-weight:500; }
.track .title{ flex:1; }
.track .dur{ color:#bbb; font-variant-numeric:tabular-nums; }

.modern-player,
.modern-player.player{
  overflow:visible !important;
  position:relative;
  z-index:1;
}
.modern-player .btn[data-tip]{ overflow:visible; }
.modern-player .btn[data-tip]::after,
.modern-player .btn[data-tip]::before{ z-index:9999; pointer-events:none; }

/* Mobile */
@media (max-width:640px){
  :root{ --range-h:8px; --range-thumb:18px; }

  .player{
    width:100%; max-width:95vw; height:auto; padding:12px; border-radius:14px;
    display:grid;
    grid-template-columns:auto auto auto auto auto auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "progress progress progress progress progress progress"
      "mode     vol      prev     play     next     list";
    align-items:center; justify-items:center; gap:10px; box-sizing:border-box;
  }
  .progress-wrap{
    grid-area:progress; width:100%;
    display:grid; grid-template-columns:min-content 1fr min-content;
    align-items:center; column-gap:8px; padding:0 6px;
  }
  #currentTime{ grid-column:1; justify-self:start; font-size:12px; line-height:1; }
  #progressBar{ grid-column:2; }
  #duration{ grid-column:3; justify-self:end; font-size:12px; line-height:1; white-space:nowrap; padding-right:2px; }

  #modeBtn{ grid-area:mode; }
  .volume-wrap{ grid-area:vol; display:flex; align-items:center; gap:8px; }
  .volume-range{ display:block !important; width:70px; }

  .center-controls{ display:contents; }
  #prev{ grid-area:prev; }
  #next{ grid-area:next; }
  #playlistBtn{ grid-area:list; }
  #play{
    grid-area:play;
    width:55px; aspect-ratio:1/1; border-radius:50%;
    background:rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center; padding:0 !important;
  }
  #play .play-circle{ width:50px !important; height:50px !important; display:block; }

  .btn svg, .prevnext svg{ width:20px; height:20px; }
  .player #prev, .player #play, .player #next{ transform:translateX(-3px); }
}

/* No hover tooltips on touch (mobile) */
@media (max-width:640px) and (hover:none){
  .btn[data-tip]::after, .btn[data-tip]::before{ display:none !important; }
}

/* Light mode */
html.light-mode, body.light-mode{ --player-empty:#e6e6e6; }

html.light-mode .player, body.light-mode .player{
  background:#fff; color:#111; box-shadow: 0 2px 15px rgba(0,0,0,.15);
}
html.light-mode .btn svg, body.light-mode .btn svg{ stroke:#222; }
html.light-mode .time, body.light-mode .time{ color:#333; }
html.light-mode #play, body.light-mode #play{ background:rgba(0,0,0,.08); }
html.light-mode .playlist-panel, body.light-mode .playlist-panel{
  background:#fff; border:1px solid rgba(0,0,0,.08);
}
html.light-mode .track:hover, body.light-mode .track:hover{ background:#f5f5f5; }
html.light-mode .track .idx,
html.light-mode .track .dur,
body.light-mode .track .idx,
body.light-mode .track .dur{ color:#666; }

/* حفظ ساختار خط سافت در لایت‌مود */
html.light-mode .modern-player input[type="range"],
body.light-mode .modern-player input[type="range"]{
  --mp-fill:  var(--player-accent-2, #d4a017);
  --mp-empty: var(--player-empty, #e6e6e6);
  --mp-soft:  rgba(0,0,0,.12);
}

@media (min-width:641px){
  .player #play{
    width:56px; aspect-ratio:1/1; border-radius:50% !important;
    display:flex; align-items:center; justify-content:center; padding:0 !important;
  }
  .player #play .play-circle{ width:50px; height:50px; display:block; }
}

#play #playIcon path{ fill:currentColor !important; stroke:currentColor !important; }
body:not(.light-mode) #play{ color:#fff; }
body.light-mode #play{ color:#222; }

/* ردیف ترک (لیست پخش) */
.modern-player .playlist-panel #tracks .track{
  display:grid;
  grid-template-columns: 24px 40px 1fr min-content auto; /* idx | thumb | title | goto | dur */
  align-items:center;
  gap:10px;
  padding:8px 10px;
  cursor:pointer;
}
.modern-player .playlist-panel #tracks .track.no-thumb{
  grid-template-columns: 24px 1fr min-content auto;
}
.modern-player .playlist-panel #tracks .track .idx{
  opacity:.7; width:24px; text-align:right; font-variant-numeric:tabular-nums;
}
.modern-player .playlist-panel #tracks .track .thumb{
  width:36px; height:36px; border-radius:6px; object-fit:cover;
  background:#2a2a2a; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.modern-player .playlist-panel #tracks .track .title{
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.modern-player .playlist-panel #tracks .track .goto-post{
  justify-self:end;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:inherit; text-decoration:none;
  transition:background .15s ease;
  padding:0;
}
.modern-player .playlist-panel #tracks .track .goto-post:hover{ background:rgba(255,255,255,.12); }
.modern-player .playlist-panel #tracks .track .goto-post svg{ width:16px; height:16px; display:block; }
.modern-player .playlist-panel #tracks .track .goto-post .label{ display:none; font-size:12px; line-height:1; opacity:.9; }
.modern-player .playlist-panel #tracks .track .dur{
  opacity:.7; font-variant-numeric:tabular-nums; padding-left:8px;
}
.modern-player .playlist-panel #tracks .track.active{
  background:rgba(255,255,255,.06); border-radius:10px;
}

/* موبایل/تاچ */
@media (pointer: coarse){
  .modern-player .playlist-panel #tracks .track{
    gap:6px; padding:8px;
    grid-template-columns: 20px 36px 1fr 28px auto;
  }
  .modern-player .playlist-panel #tracks .track.no-thumb{
    grid-template-columns: 20px 1fr 28px auto;
  }
  .modern-player .playlist-panel #tracks .track .goto-post{
    height:28px; width:28px; padding:0; gap:0;
  }
  .modern-player .playlist-panel #tracks .track .goto-post .label{ display:none !important; }
  .modern-player .playlist-panel #tracks .track .title{ font-size:14px; }
  .modern-player .playlist-panel #tracks .track .dur{ font-size:12px; padding-left:4px; }
}

/* تولتیپ سریع (دسکتاپ) */
@media (hover: hover) and (pointer: fine){
  .modern-player .playlist-panel #tracks .track .goto-post{ position: relative; }
  .modern-player .playlist-panel #tracks .track .goto-post[data-tip]::after{
    content: attr(data-tip);
    position: absolute; top: 50%; left: calc(100% + 6px);
    transform: translateY(-50%);
    white-space: nowrap; font-size: 12px; line-height: 1;
    padding: 6px 8px; border-radius: 6px;
    background: rgba(0,0,0,.88); color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 99;
  }
  .modern-player .playlist-panel #tracks .track .goto-post[data-tip]:hover::after{ opacity: 1; }
}

/* احترام به کاهش انیمیشن */
@media (prefers-reduced-motion: reduce){
  .modern-player .playlist-panel #tracks .track .goto-post[data-tip]::after{ transition: none; }
}