/* video.css — v22 (FINAL) */


.thumbMedia{position:relative;aspect-ratio:16/9}
.thumbMedia img,.thumbMedia video.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .pv{opacity:0}
.card.is-playing .pv{opacity:1}
.card.is-playing img{opacity:0}



.vhVideoPage{
  --vh-bg: #0b0b10;
  --vh-line: rgba(255,255,255,.10);
  --vh-muted: rgba(255,255,255,.70);
  --vh-muted2: rgba(255,255,255,.55);
  --vh-white: #fff;

  --vh-gold: rgba(255,191,0,.98);
  --vh-gold-bg: rgba(255,191,0,.12);
  --vh-gold-br: rgba(255,191,0,.38);

  --vh-card-bg: rgba(10,10,14,.72);
}

.vhVideoPage, .vhVideoPage *{ box-sizing:border-box; }

/* ✅ هیچ آبی (حتی visited) */
.vhVideoPage a,
.vhVideoPage a:visited,
.vhVideoPage a:hover,
.vhVideoPage a:active{ color: inherit; }

/* ✅ کلاً Hover / حرکت / Transition خاموش */
.vhVideoPage .card,
.vhVideoPage .rvCard,
.vhVideoPage .stripCard,
.vhVideoPage .thumbMedia img,
.vhVideoPage .thumbMedia video,
.vhVideoPage .thumb{ transition:none !important; transform:none !important; }
.vhVideoPage .card:hover,
.vhVideoPage .rvCard:hover,
.vhVideoPage .stripCard:hover{ transform:none !important; }

/* Page wrap */
.vhVideoPage .wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 12px 44px;
}
@media (max-width:980px){
  .vhVideoPage .wrap{ max-width:100%; padding:10px 12px 26px; }
}

/* Layout */
.vhVideoPage .grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.75fr .9fr;
  gap: 14px;
  align-items: start;
}
@media (max-width:980px){
  .vhVideoPage .grid{ grid-template-columns: 1fr; }
}

/* Card */
.vhVideoPage .card{
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-line);
  border-radius: 18px;
  overflow: hidden;
}

/* ======================
   ✅ PLAYER (GUARANTEED)
   - رزرو ارتفاع 16:9 با ::before (بدون جابجایی اولیه)
   - Stage absolute تا ارتفاع اضافه نسازد
   - هر wrapper fluid/vast داخل playerWrap forced absolute
====================== */
.vhVideoPage .playerWrap{
  position:relative;
  background:#000;
  border-radius: 18px;
  overflow:hidden;
  border-bottom: 1px solid var(--vh-line);
}

/* ✅ 16:9 ثابت از لحظه اول */
.vhVideoPage .playerWrap::before{
  content:"";
  display:block;
  padding-top:56.25%;
}

/* Stage روی همان فضای رزروشده می‌نشیند */
.vhVideoPage .vhStage{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden;
  background:#000;
  border-radius:18px;
}

/* هر چیزی داخل stage فول */
.vhVideoPage .vhStage > .player,
.vhVideoPage .vhStage > video.player,
.vhVideoPage .vhStage > img.restrictedPoster,
.vhVideoPage .vhStage > .playerEmbed,
.vhVideoPage .vhStage > .vh-ctp{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* ✅ مهم: wrapperهای Fluid/VAST هر جا داخل playerWrap باشند */
.vhVideoPage .playerWrap .fluid_video_wrapper,
.vhVideoPage .playerWrap .fluid_video_wrapper_parent,
.vhVideoPage .playerWrap .fluid_player,
.vhVideoPage .playerWrap .fluid_video_wrapper_container,
.vhVideoPage .playerWrap div[id^="fluid_video_wrapper"],
.vhVideoPage .playerWrap .fluid_vast_container,
.vhVideoPage .playerWrap [class*="vast"],
.vhVideoPage .playerWrap [id*="vast"]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
}

/* داخل wrapper هم ویدیو/iframe 100% */
.vhVideoPage .playerWrap .fluid_video_wrapper video,
.vhVideoPage .playerWrap .fluid_video_wrapper iframe,
.vhVideoPage .playerWrap video.player,
.vhVideoPage .playerWrap iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  background:#000 !important;
}

/* Player element */
.vhVideoPage .player,
.vhVideoPage video.player{
  display:block;
  width:100%;
  height:100%;
  background:#000;
  object-fit:contain;
}

/* Restricted poster */
.vhVideoPage .restrictedPoster{
  object-fit:cover;
  filter: saturate(.95) brightness(.78);
  transform: scale(1.02);
}

/* Content padding */
.vhVideoPage .cardPad{ padding:14px; }
@media (max-width:980px){ .vhVideoPage .cardPad{ padding:12px; } }

/* ✅ تیتر زیر پلیر راست‌چین */
.vhVideoPage .vhTitle{
  font-size: 18px;
  font-weight: 1000;
  margin: 0 0 10px;
  line-height: 1.35;
  text-align: right;
  color: #fff;
}
@media (max-width:980px){ .vhVideoPage .vhTitle{ font-size:16px; margin:0 0 8px; } }

.vhVideoPage .metaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size: 13px;
  color: var(--vh-muted);
}
@media (max-width:980px){ .vhVideoPage .metaRow{ gap:8px; font-size:12px; } }

.vhVideoPage .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--vh-line);
  background: rgba(0,0,0,.18);
}
.vhVideoPage .pill b{ color:#fff; }
.vhVideoPage .pill.orange{
  border-color: rgba(255,191,0,.35);
  background: rgba(255,191,0,.10);
}
.vhVideoPage .vhSmallNote{ opacity:.8; }

.vhVideoPage .desc{
  margin-top:12px;
  border:1px solid var(--vh-line);
  border-radius:14px;
  padding:12px;
  background: rgba(0,0,0,.16);
  line-height: 1.75;
  font-size: 14px;
  color: rgba(255,255,255,.88);
}
.vhVideoPage .descTitle{
  font-weight:1000;
  margin:0 0 8px;
  font-size:14px;
  color: #fff;
}

.vhVideoPage .tagRow{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.vhVideoPage .tagPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
}
.vhVideoPage .tagPill:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,191,0,.25);
}
.vhVideoPage .tagPill::before{ content:"#"; opacity:.55; font-weight:1000; }

.vhVideoPage .sideTitle{
  font-weight:1000;
  font-size:14px;
  margin:0;
  color: #fff;
}

/* ✅ Related layout */
.vhVideoPage .relGrid{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 10px;
}

/* ✅ کارت مخفی برای LoadMore */
.vhVideoPage .isHidden{ display:none !important; }

/* ✅ فیکس thumbMedia */
.vhVideoPage .thumb{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:14px;
  background:#000;
}
.vhVideoPage .thumb::before{ content:none !important; display:none !important; }

.vhVideoPage .thumbMedia{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  overflow:hidden !important;
  line-height:0 !important;
  font-size:0 !important;
  background:#000 !important;
}
.vhVideoPage .thumbMedia > img,
.vhVideoPage .thumbMedia > video.pv{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  max-width:none !important;
  max-height:none !important;
}
.vhVideoPage .thumbMedia > video.pv{ pointer-events:none !important; }

/* Shade */
.vhVideoPage .thumbShade{
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.10) 48%, transparent 78%);
  pointer-events:none;
  z-index:2;
}

/* Badge “تماشا کن” */
.vhVideoPage .watchNow{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:3;
  padding:6px 10px;
  border-radius:999px;
  background: var(--vh-gold-bg);
  border: 1px solid var(--vh-gold-br);
  color:#fff;
  font-weight:1000;
  font-size:12px;
  line-height:1;
  pointer-events:none;
  white-space:nowrap;
  backdrop-filter: blur(6px);
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
}

/* Related card */
.vhVideoPage .rvCard{
  border-radius: 16px;
  overflow: hidden;
  display:flex;
  align-items:stretch;
  contain: layout paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.vhVideoPage .rvCard .thumb{
  flex: 0 0 170px;
  height: 96px;
}
@media (max-width:980px){
  .vhVideoPage .rvCard .thumb{ flex-basis: 150px; height: 88px; }
}
.vhVideoPage .rvCard .meta{
  flex: 1 1 auto;
  padding: 10px 10px 12px;
  min-width: 0;
}

.vhVideoPage .rvCard .title{
  margin:0 0 6px;
  font-size: 13px;
  line-height: 1.25;
  text-align:right;
  color:#fff !important;
}
.vhVideoPage .rvCard .title a{
  color:#fff !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.vhVideoPage .sub{
  display:flex;
  gap:8px;
  font-size: 10.5px;
  color: rgba(255,255,255,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Desktop random grid */
.vhVideoPage .deskOnly{ display:none; }
@media (min-width:980px){
  .vhVideoPage .deskOnly{ display:block; margin-top:14px; }
  .vhVideoPage .deskGrid{
    padding:0 12px 14px;
    display:grid;
    gap:12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items:stretch;
  }
  .vhVideoPage .stripCard{ padding:10px; }
  .vhVideoPage .stripCard .meta{ padding-top:10px; }
  .vhVideoPage .stripCard .title{ text-align:right; }
}

/* Load more button */
.vhVideoPage .vhLoadMoreBtn{
  margin-top: 10px;
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255,191,0,.10);
  border: 1px solid rgba(255,191,0,.32);
  color:#fff;
  font-weight: 1000;
  cursor:pointer;
}
.vhVideoPage .vhLoadMoreBtn:hover{ background: rgba(255,191,0,.14); }
.vhVideoPage .vhLoadMoreBtn.vhDisabled{
  opacity:.65;
  cursor:default;
}

.vhVideoPage .vhEmpty{
  color:rgba(243,244,246,.70);
  font-size:12px;
}

/* Click-to-play */
.vhVideoPage .vh-ctp{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.20);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  z-index:50;
}
.vhVideoPage .vh-ctp-inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  background: var(--vh-gold-bg);
  border: 1px solid var(--vh-gold-br);
  backdrop-filter: blur(8px);
}
.vhVideoPage .vh-ctp .vh-icon{
  width:44px;height:44px;
  border-radius:999px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.vhVideoPage .vh-ctp b{ font-weight:1000; color:#fff; }

.vhVideoPage .vh-ctp.vh-arming{
  opacity:0 !important;
  pointer-events:none !important;
  background:transparent !important;
}

.vhVideoPage .vh-hidden{ display:none !important; }
.vhVideoPage .playerWrap.vh-playing > .vh-ctp{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .vhVideoPage *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}


.vhVideoPage .vhSub {
    display:flex;
    gap:10px;
    font-size:12px;
    opacity:.85;
    flex-wrap:wrap;
    color:rgba(255,255,255,.62);
}

.vhVideoPage .vhSub span {
    border:none !important;
}

.vhVideoPage .vhSub span::before,
.vhVideoPage .vhSub span::after {
    content:none !important;
    display:none !important;
    border:0 !important;
}