/* ============================================================

   PV PLAYER — CSS v2.0

   ساختار: progress بالا، دکمه‌ها پایین، دکمه‌ها شفاف

   ============================================================ */



:root{

  --pv-accent:      #ff543e;

  --pv-accent-dim:  rgba(255,84,62,.7);

  --pv-white:       #ffffff;

  --pv-ctrl-h:      44px;   /* ارتفاع دکمه‌ها */

  --pv-bar-h:       4px;    /* ضخامت progress در حالت عادی */

  --pv-bar-h-hover: 6px;    /* ضخامت progress هنگام hover */

}



/* ── فونت ──────────────────────────────────────────────── */

@font-face{

  font-family:"YekanBakh";

  src:url("https://otagheashpazi.com/wp-content/uploads/2026/02/YekanBakh-VF.ttf") format("truetype");

  font-style:normal;

  font-display:swap;

}

.pv-player,

.pv-player *{

  font-family:"YekanBakh",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;

  font-weight:600 !important;

  font-feature-settings:"ss01" 1 !important;

  box-sizing:border-box;

}



/* ── Stage ──────────────────────────────────────────────── */

.pv-stage{

  position:relative;

  width:100%;

  aspect-ratio:var(--pv-aspect,16/9);

  background:#000;

  border-radius:14px;

  overflow:hidden;

  line-height:0;

}

.pv-video{

  width:100%;

  height:100%;

  display:block;

  background:#000;

  vertical-align:top;

}



/* ── User overlay ───────────────────────────────────────── */

.pv-user{

  position:absolute;

  top:12px;

  left:12px;

  z-index:12;

  padding:8px 12px;

  border-radius:8px;

  background:rgba(0,0,0,.40);

  color:#fff;

  font-size:13px;

  line-height:1.4;

  user-select:none;

  pointer-events:none;

  transition:opacity .2s ease;

}



/* ── Center overlay (pause state) ──────────────────────── */

.pv-center-play{

  position:absolute;

  inset:0;

  z-index:14;

  background:transparent !important;

  display:none !important;

  align-items:center;

  justify-content:center;

  gap:24px;

  border:none;

  padding-bottom:48px; /* از progress bar فاصله بگیر */

}

.pv-center-play:not([hidden]){ display:flex !important; }

.pv-player .pv-center-play[hidden]{ display:none !important; }



/* دکمه play وسط */

.pv-center-btn{

  appearance:none;

  border:none !important;

  outline:none;

  cursor:pointer;

  background:transparent !important;

  padding:0;

  display:flex;

  align-items:center;

  justify-content:center;

}

.pv-center-ic{

  width:72px;

  height:72px;

  border-radius:50%;

  background:rgba(0,0,0,.45);

  backdrop-filter:blur(6px);

  -webkit-backdrop-filter:blur(6px);

  display:flex;

  align-items:center;

  justify-content:center;

  border:2px solid rgba(255,255,255,.25);

  transition:transform .15s ease, background .15s ease;

}

.pv-center-btn:hover .pv-center-ic{

  background:rgba(0,0,0,.6);

  transform:scale(1.08);

}

.pv-center-ic::before{

  content:"";

  width:0;height:0;

  border-top:14px solid transparent;

  border-bottom:14px solid transparent;

  border-left:22px solid #fff;

  margin-left:5px;

}

/* pause state */

.pv-center-ic.pv-ic-pause::before{ display:none; }

.pv-center-ic.pv-ic-pause::after{

  content:"";

  display:block;

  width:5px;height:20px;

  background:#fff;

  box-shadow:10px 0 0 #fff;

  border-radius:2px;

  margin-left:-5px;

}



/* دکمه‌های seek */

.pv-seek-btn{

  appearance:none;

  border:none !important;

  outline:none;

  cursor:pointer;

  background:rgba(0,0,0,.30) !important;

  backdrop-filter:blur(4px);

  -webkit-backdrop-filter:blur(4px);

  border-radius:50%;

  width:52px;

  height:52px;

  padding:0;

  display:flex;

  align-items:center;

  justify-content:center;

  transition:background .14s ease, transform .12s ease;

  border:1.5px solid rgba(255,255,255,.20) !important;

}

.pv-seek-btn:hover{

  background:rgba(0,0,0,.50) !important;

  transform:scale(1.1);

}

.pv-seek-btn:active{ transform:scale(.94); }

.pv-seek-btn svg{

  width:28px;

  height:28px;

}



/* ── Controls wrapper ───────────────────────────────────── */

.pv-controls{

  position:absolute;

  left:0;right:0;bottom:0;

  z-index:15;

  padding:0 0 0 0;

  background:linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,.30) 70%,transparent 100%);

  transition:opacity .2s ease;

  direction:ltr;

}

.pv-player.pv-idle .pv-controls{ opacity:0; pointer-events:none; }

.pv-player.pv-idle .pv-user{     opacity:0; }



/* ── Progress row ───────────────────────────────────────── */

.pv-progress-row{

  position:relative;

  width:100%;

  height:18px;           /* hit area بزرگ */

  display:flex;

  align-items:center;

  cursor:pointer;

  padding:0 14px;

}



/* track */

.pv-progress{

  position:relative;

  width:100%;

  height:var(--pv-bar-h);

  border-radius:999px;

  background:rgba(255,255,255,.22);

  transition:height .15s ease;

  overflow:hidden;

}

.pv-progress-row:hover .pv-progress{

  height:var(--pv-bar-h-hover);

}



/* fill */

.pv-progress-fill{

  position:absolute;

  inset:0;

  width:var(--pv-fill,0%);

  background:var(--pv-accent);

  border-radius:999px;

  pointer-events:none;

}



/* invisible range روی track */

.pv-progress-input{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  opacity:0;

  cursor:pointer;

  margin:0;

}



/* ── Buttons row ────────────────────────────────────────── */

.pv-bar{

  display:flex;

  align-items:center;

  padding:4px 10px 10px;

  gap:2px;

}

.pv-left,

.pv-right{

  display:flex;

  align-items:center;

  gap:2px;

  flex-shrink:0;

}

.pv-spacer{ flex:1 1 auto; }



/* ── Base button ────────────────────────────────────────── */

.pv-btn,

.pv-dd-btn{

  appearance:none;

  border:none !important;

  outline:none;

  background:transparent !important;

  color:var(--pv-white);

  border-radius:8px;

  width:var(--pv-ctrl-h);

  height:var(--pv-ctrl-h);

  padding:0 !important;

  cursor:pointer;

  font:inherit;

  line-height:1;

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  user-select:none;

  transition:background .14s ease, transform .1s ease;

  flex-shrink:0;

}

.pv-btn:hover,

.pv-dd-btn:hover{

  background:rgba(255,255,255,.12) !important;

}

.pv-btn:active,

.pv-dd-btn:active{

  transform:scale(.92);

}



/* ── Quality button (wider — has label) ─────────────────── */

.pv-dd-btn{

  width:auto !important;

  padding:0 10px !important;

  gap:5px !important;

  min-width:52px;

}

.pv-dd-label{

  font-size:12px;

  color:#fff !important;

  line-height:1;

}

.pv-dd-arrows{

  display:flex;

  align-items:center;

  line-height:1;

}

.pv-dd-arrows::after{

  content:"▾";

  color:rgba(255,255,255,.75);

  font-size:13px;

}



/* ── SVG icons ──────────────────────────────────────────── */

.pv-svg{

  width:22px;height:22px;

  display:block !important;

  flex:0 0 22px !important;

  filter:brightness(0) invert(1);

  max-width:none !important;

}

.pv-svg[hidden]{ display:none !important; }

.pv-player img.pv-svg[hidden]{ display:none !important; }



/* ── Play/Pause CSS icons ───────────────────────────────── */

.pv-ic{

  width:20px;height:20px;

  display:flex;

  align-items:center;

  justify-content:center;

}

.pv-ic-play::before{

  content:"";

  width:0;height:0;

  border-top:8px solid transparent;

  border-bottom:8px solid transparent;

  border-left:13px solid #fff;

  margin-left:2px;

}

.pv-ic-pause::before{

  content:"";

  width:3px;height:14px;

  background:#fff;

  box-shadow:7px 0 0 #fff;

  border-radius:1px;

  margin-left:-3px;

}



/* ── Time display ───────────────────────────────────────── */

.pv-time{

  color:rgba(255,255,255,.9);

  font-size:12px;

  user-select:none;

  display:flex;

  align-items:center;

  gap:3px;

  padding:0 6px;

  white-space:nowrap;

}

.pv-sep{ opacity:.5; }



/* ── Dropdown menus ─────────────────────────────────────── */

.pv-dd{ position:relative; }



.pv-dd-menu{

  position:absolute;

  right:0;

  bottom:calc(100% + 8px);

  min-width:130px;

  background:rgba(24,24,24,.95);

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.10);

  border-radius:10px;

  padding:4px 0;

  z-index:40;

  overflow:hidden;

  display:flex;

  flex-direction:column;

}



.pv-menu-item{

  width:100%;

  background:transparent !important;

  color:rgba(255,255,255,.85) !important;

  padding:10px 14px;

  cursor:pointer;

  text-align:center;

  font-size:13px;

  border:none !important;

  transition:background .12s ease, color .12s ease;

  line-height:1;

}

.pv-menu-item:hover{

  background:rgba(255,255,255,.08) !important;

  color:#fff !important;

}

.pv-menu-item.is-active{

  color:var(--pv-accent) !important;

  background:transparent !important;

}

.pv-menu-item + .pv-menu-item{

  border-top:1px solid rgba(255,255,255,.07) !important;

}



/* ── Volume popover ─────────────────────────────────────── */

.pv-volbox{ position:relative; }

.pv-vol-pop{

  position:absolute;

  right:0;

  bottom:calc(100% + 8px);

  width:40px;

  height:120px;

  background:rgba(24,24,24,.95);

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.10);

  border-radius:10px;

  padding:10px 0;

  display:flex;

  align-items:center;

  justify-content:center;

}

.pv-vol-range{

  writing-mode:bt-lr;

  -webkit-appearance:slider-vertical;

  width:6px;

  height:90px;

}



/* ── Loading spinner ────────────────────────────────────── */

.pv-loading{

  position:absolute;

  inset:0;

  z-index:15;

  display:flex;

  align-items:center;

  justify-content:center;

  background:transparent;

}

.pv-loading::after{

  content:"";

  width:40px;height:40px;

  border-radius:50%;

  border:3px solid rgba(255,255,255,.20);

  border-top-color:#fff;

  animation:pv-spin .8s linear infinite;

}

@keyframes pv-spin{ to{ transform:rotate(360deg); } }



/* ── Error ──────────────────────────────────────────────── */

.pv-error{

  position:absolute;

  left:12px;bottom:70px;

  z-index:20;

  padding:7px 12px;

  border-radius:8px;

  background:rgba(0,0,0,.75);

  color:#fff;

  font-size:13px;

}



/* ── Subtitle ───────────────────────────────────────────── */

.pv-subtitle-box{

  position:absolute;

  left:0;right:0;

  bottom:70px;

  z-index:14;

  text-align:center;

  pointer-events:none;

  font-size:clamp(0.75rem,2.2vw,1.1rem);

  padding:0 12px;

}

.pv-subtitle-text{

  display:inline-block;

  background:rgba(0,0,0,.50);

  backdrop-filter:blur(4px);

  -webkit-backdrop-filter:blur(4px);

  padding:8px 14px;

  border-radius:8px;

  color:#fff;

  line-height:1.6;

  max-width:82%;

}



/* ── Fullscreen ─────────────────────────────────────────── */

.pv-stage:fullscreen,

.pv-stage:-webkit-full-screen{

  width:100vw !important;

  height:100vh !important;

  aspect-ratio:auto !important;

  border-radius:0 !important;

  background:#000 !important;

}

.pv-stage:fullscreen .pv-video,

.pv-stage:-webkit-full-screen .pv-video{

  width:100% !important;

  height:100% !important;

  object-fit:contain;

}



/* ── Hard locks ─────────────────────────────────────────── */

.pv-player [hidden]{ display:none !important; }

.pv-player .pv-dd-menu[hidden],

.pv-player .pv-vol-pop[hidden],

.pv-player .pv-loading[hidden],

.pv-player .pv-error[hidden],

.pv-player .pv-center-play[hidden]{ display:none !important; }



/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width:520px){

  :root{

    --pv-ctrl-h: 38px;

  }



  .pv-time{ font-size:11px; padding:0 4px; }



  .pv-bar{ padding:2px 8px 8px; gap:1px; }



  .pv-progress-row{ padding:0 10px; }



  .pv-svg{

    width:20px !important;

    height:20px !important;

    flex:0 0 20px !important;

  }



  .pv-dd-btn{

    padding:0 8px !important;

    min-width:44px;

  }

  .pv-dd-label{ font-size:11px; }



  .pv-dd-menu{

    min-width:110px;

    max-width:65vw;

    max-height:40vh;

    overflow:auto;

  }

  .pv-menu-item{ padding:9px 12px; font-size:12px; }



  .pv-vol-pop{

    width:36px;

    height:110px;

  }

  .pv-vol-range{ height:82px; }



  .pv-center-play{ gap:16px; }

  .pv-center-ic{ width:60px; height:60px; }

  .pv-center-ic::before{

    border-top-width:11px;

    border-bottom-width:11px;

    border-left-width:18px;

  }

  .pv-seek-btn{ width:44px; height:44px; }

  .pv-seek-btn svg{ width:24px; height:24px; }

}



/* ── box-shadow reset (از قالب) ──────────────────────────── */

.pv-stage{ box-shadow: none !important; }



/* ── Toast (resume position) ────────────────────────────── */

.pv-toast{

  position:absolute;

  bottom:80px;

  left:50%;

  transform:translateX(-50%);

  z-index:30;

  background:rgba(20,20,20,.92);

  backdrop-filter:blur(8px);

  -webkit-backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,.12);

  border-radius:10px;

  padding:10px 14px;

  color:#fff;

  font-size:13px;

  display:flex;

  align-items:center;

  gap:10px;

  white-space:nowrap;

  animation: pv-fadein .2s ease;

}

@keyframes pv-fadein{ from{opacity:0;transform:translateX(-50%) translateY(6px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }



.pv-toast-yes,

.pv-toast-no{

  border:none !important;

  border-radius:6px;

  padding:5px 10px;

  font-size:12px;

  cursor:pointer;

  font-family:inherit !important;

  font-weight:600 !important;

}

.pv-toast-yes{ background:var(--pv-accent); color:#fff; }

.pv-toast-no { background:rgba(255,255,255,.15); color:#fff; }



/* ── Chapter dots روی progress ──────────────────────────── */

.pv-chapter-dot{

  position:absolute;

  top:50%;

  transform:translate(-50%,-50%);

  width:4px;

  height:4px;

  border-radius:50%;

  background:#fff;

  opacity:.7;

  pointer-events:none;

  z-index:2;

}



/* ── Chapter label (نام فصل جاری) ──────────────────────── */

.pv-chapter-label{

  position:absolute;

  top:12px;

  left:50%;

  transform:translateX(-50%);

  z-index:13;

  background:rgba(0,0,0,.50);

  backdrop-filter:blur(4px);

  -webkit-backdrop-filter:blur(4px);

  color:#fff;

  font-size:12px;

  padding:5px 12px;

  border-radius:6px;

  pointer-events:none;

  white-space:nowrap;

  max-width:80%;

  overflow:hidden;

  text-overflow:ellipsis;

}



/* ── PiP button SVG ─────────────────────────────────────── */

.pv-pip .pv-svg{

  width:22px;

  height:22px;

}



/* ── Settings Panel ─────────────────────────────────────── */

.pv-dd-settings{ position:relative; }



.pv-settings-panel{

  position:absolute;

  right:0;

  bottom:calc(100% + 8px);

  width:220px;

  background:rgba(18,18,18,.96);

  backdrop-filter:blur(14px);

  -webkit-backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,.10);

  border-radius:12px;

  padding:6px 0;

  z-index:40;

  overflow:hidden;

  display:flex;

  flex-direction:column;

}



/* ردیف اصلی هر بخش (کیفیت / سرعت) */

.pv-set-row{

  width:100%;

  background:transparent !important;

  border:none !important;

  color:#fff;

  padding:11px 14px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  cursor:pointer;

  font:inherit;

  font-size:13px !important;

  transition:background .12s ease;

}

.pv-set-row:hover{ background:rgba(255,255,255,.08) !important; }



.pv-set-lbl{ color:rgba(255,255,255,.85); }

.pv-set-val{

  display:flex;

  align-items:center;

  gap:2px;

  color:rgba(255,255,255,.5);

  font-size:12px !important;

}



/* ردیف PiP */

.pv-set-pip{

  width:100%;

  background:transparent !important;

  border:none !important;

  border-top:1px solid rgba(255,255,255,.07) !important;

  color:#fff;

  padding:11px 14px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  cursor:pointer;

  font:inherit;

  font-size:13px !important;

  transition:background .12s ease;

}

.pv-set-pip:hover{ background:rgba(255,255,255,.08) !important; }



/* divider بین sections */

.pv-set-section + .pv-set-section,

.pv-set-section + .pv-set-pip{

  border-top:1px solid rgba(255,255,255,.07);

}



/* submenu */

.pv-set-back{

  width:100%;

  background:transparent !important;

  border:none !important;

  border-bottom:1px solid rgba(255,255,255,.07) !important;

  color:#fff;

  padding:11px 14px;

  display:flex;

  align-items:center;

  gap:6px;

  cursor:pointer;

  font:inherit;

  font-size:13px !important;

  font-weight:700 !important;

}

.pv-set-back:hover{ background:rgba(255,255,255,.06) !important; }



.pv-set-divider{ display:none; }



.pv-set-item{

  width:100%;

  background:transparent !important;

  border:none !important;

  color:rgba(255,255,255,.80) !important;

  padding:10px 14px 10px 10px;

  display:flex;

  align-items:center;

  gap:8px;

  cursor:pointer;

  font:inherit;

  font-size:13px !important;

  transition:background .1s ease;

}

.pv-set-item:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; }

.pv-set-item.is-active{ color:#fff !important; }



/* تیک فعال */

.pv-set-check{ opacity:0; flex-shrink:0; }

.pv-set-item.is-active .pv-set-check{ opacity:1; }



/* Mobile */

@media (max-width:520px){

  .pv-settings-panel{

    width:180px;

    right: 0;

    bottom: calc(100% + 6px);

  }

  .pv-set-row,

  .pv-set-pip,

  .pv-set-back,

  .pv-set-item{

    padding: 9px 12px;

    font-size: 12px !important;

  }

}



/* ══════════════════════════════════════════════════════════

   MINIMAL MODE

   ══════════════════════════════════════════════════════════ */



.pv-minimal-overlay{

  position:absolute;

  inset:0;

  z-index:14;

  display:flex;

  align-items:center;

  justify-content:center;

  background:transparent;

  pointer-events:none;

}



/* دکمه play — بدون blur، بدون background */

.pv-minimal-play{

  appearance:none;

  border:none !important;

  outline:none;

  cursor:pointer;

  background:transparent !important;

  padding:0;

  pointer-events:all;

  transition:transform .15s ease;

  /* وقتی پلی میشه مخفی میشه */

  display:flex;

  align-items:center;

  justify-content:center;

}

.pv-minimal-play:hover{ transform:scale(1.08); }

.pv-minimal-play:active{ transform:scale(.94); }



/* حلقه نازک + مثلث، بدون blur و background */

.pv-minimal-ic{

  width:64px;

  height:64px;

  border-radius:50%;

  border:2.5px solid rgba(255,255,255,.85);

  display:flex;

  align-items:center;

  justify-content:center;

  /* NO background, NO backdrop-filter */

  transition:border-color .15s ease;

}

.pv-minimal-play:hover .pv-minimal-ic{

  border-color:#fff;

}

.pv-minimal-ic::before{

  content:"";

  width:0; height:0;

  border-top:10px solid transparent;

  border-bottom:10px solid transparent;

  border-left:17px solid rgba(255,255,255,.90);

  margin-left:5px;

  transition:border-left-color .15s ease;

}

.pv-minimal-play:hover .pv-minimal-ic::before{

  border-left-color:#fff;

}



/* دکمه fullscreen گوشه */

.pv-minimal-fs{

  position:absolute;

  bottom:10px;

  right:10px;

  appearance:none;

  border:none !important;

  outline:none;

  cursor:pointer;

  background:rgba(0,0,0,.35) !important;

  border-radius:8px;

  width:36px; height:36px;

  display:flex;

  align-items:center;

  justify-content:center;

  pointer-events:all;

  transition:background .14s ease;

}

.pv-minimal-fs:hover{ background:rgba(0,0,0,.55) !important; }

.pv-minimal-fs .pv-svg{

  width:18px !important;

  height:18px !important;

  flex:0 0 18px !important;

}



/* زیرنویس minimal: پایین صفحه، سایز مناسب */

.pv-player[data-mode="minimal"] .pv-subtitle-box{

  bottom:12px !important;

  font-size:clamp(0.65rem, 1.6vw, 0.9rem) !important;

}



@media (max-width:520px){

  .pv-minimal-ic{ width:52px; height:52px; }

  .pv-minimal-ic::before{

    border-top-width:8px;

    border-bottom-width:8px;

    border-left-width:14px;

    margin-left:4px;

  }

  .pv-player[data-mode="minimal"] .pv-subtitle-box{

    font-size:clamp(0.6rem, 1.4vw, 0.8rem) !important;

  }

}