/*!
 * NewDiv Reels — صفحه‌ی ریلز (سبک شورتس)
 * Copyright (c) 2026 NewDiv — https://new-div.ir
 */

/* ---------- پایه: صفحه‌ی مشکی تمام‌صفحه، مستقل از پوسته ---------- */
html, body.ndr-shorts-page{
  margin:0 !important; padding:0 !important; height:100%;
  background:#000 !important; overflow:hidden !important;
}
/* هر المانی که پوسته یا افزونه‌ها در انتهای صفحه چاپ کنند (دکمه بالا، منوی موبایل و...) پنهان شود */
body.ndr-shorts-page > *:not(.ndr-sh):not(script):not(style):not(link):not(noscript):not(template){
  display:none !important;
}

.ndr-sh{
  --ndr-red:#ef3b3b;
  --ndr-blue:#1f6fff;
  --ndr-btn:#2b2b2b;
  --ndr-btn-h:#3a3a3a;
  --ndr-border:#3d3d3d;
  --ndr-vh: min(calc(100vh - 64px), 860px);   /* ارتفاع ویدیو در دسکتاپ */
  position:fixed; inset:0; z-index:99999;
  background:#000; color:#fff;
  font-family:inherit; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.ndr-sh *, .ndr-sh *::before, .ndr-sh *::after{ box-sizing:border-box; }
.ndr-sh [hidden]{ display:none !important; }

/* ریست دکمه‌ها در برابر استایل پوسته */
.ndr-sh button{
  -webkit-appearance:none; appearance:none; font:inherit; color:inherit;
  margin:0; padding:0; border:0; background:none; box-shadow:none; text-transform:none;
  letter-spacing:normal; line-height:1; cursor:pointer; min-height:0; min-width:0;
}
.ndr-sh button:focus-visible, .ndr-sh a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ndr-sh svg{ display:block; }

/* ---------- بستن ---------- */
.ndr-sh-close{
  position:absolute; top:20px; right:24px; z-index:10;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:#fff !important; border-radius:50%; text-decoration:none !important;
  transition:background .2s;
}
.ndr-sh-close:hover{ background:rgba(255,255,255,.12); }

/* ---------- ویدیو (وسط) ---------- */
.ndr-sh-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:32px 0; pointer-events:none;
}
.ndr-sh-player{
  position:relative; height:var(--ndr-vh); aspect-ratio:9/16; pointer-events:auto;
}
.ndr-sh-stage{
  position:absolute; inset:0; overflow:hidden; border-radius:6px; background:#111;
  touch-action:pan-x;   /* کشیدن عمودی را خودمان مدیریت می‌کنیم */
  transition:opacity .18s ease;
}
.ndr-sh.is-switching .ndr-sh-stage{ opacity:.35; }
.ndr-sh-video, .ndr-sh-video video, .ndr-sh-video img, .ndr-sh-video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.ndr-sh-video video, .ndr-sh-video img{ object-fit:cover; background:#000; cursor:pointer; }

/* لایه‌ی کنترل‌ها */
.ndr-sh-hud{ position:absolute; inset:0; pointer-events:none; }
.ndr-sh-hud > *{ pointer-events:auto; }
.ndr-sh.is-aparat .ndr-sh-hud{ display:none; }

.ndr-sh-sound{ position:absolute; top:14px; left:14px; display:flex; direction:ltr; align-items:center; gap:10px; z-index:3; }
.ndr-sh-mute{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.ndr-sh-mute .ic-off{ display:none; }
.ndr-sh.is-muted .ndr-sh-mute .ic-on{ display:none; }
.ndr-sh.is-muted .ndr-sh-mute .ic-off{ display:block; }

.ndr-sh .ndr-sh-soundtag{
  position:relative; display:none; background:var(--ndr-blue); color:#fff;
  font-size:12.5px; font-weight:700; padding:8px 12px; border-radius:2px; white-space:nowrap;
}
.ndr-sh .ndr-sh-soundtag::before{   /* فلش کوچک سمت چپ برچسب */
  content:""; position:absolute; top:50%; left:-6px; margin-top:-6px;
  border:6px solid transparent; border-left:0; border-right-color:var(--ndr-blue);
}
.ndr-sh.is-muted .ndr-sh-soundtag{ display:block; }

.ndr-sh-fs{
  position:absolute; top:14px; right:14px; z-index:3;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.ndr-sh-fs .ic-exit{ display:none; }
.ndr-sh.is-fs .ndr-sh-fs .ic-enter{ display:none; }
.ndr-sh.is-fs .ndr-sh-fs .ic-exit{ display:block; }

.ndr-sh-bigplay{
  position:absolute; top:50%; left:50%; width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; background:rgba(255,255,255,.92); color:#1b1b1b; z-index:2;
  display:flex; align-items:center; justify-content:center; padding-left:4px;
  pointer-events:none !important; opacity:0; transform:scale(.8); transition:opacity .2s, transform .2s;
}
.ndr-sh.is-paused .ndr-sh-bigplay{ opacity:1; transform:scale(1); }

.ndr-sh-spin{
  position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; z-index:2;
  border:3px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%;
  pointer-events:none !important; display:none; animation:ndr-sh-spin .8s linear infinite;
}
.ndr-sh.is-loading .ndr-sh-spin{ display:block; }
.ndr-sh.is-loading .ndr-sh-bigplay{ opacity:0; }
@keyframes ndr-sh-spin{ to{ transform:rotate(360deg); } }

.ndr-sh-progress{
  position:absolute; left:0; right:0; bottom:0; height:16px; z-index:3;
  cursor:pointer; direction:ltr; display:flex; align-items:flex-end;
}
.ndr-sh-progress::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.35); }
.ndr-sh-progress span{ position:relative; height:4px; width:0; background:var(--ndr-red); }
.ndr-sh-progress:hover::before, .ndr-sh-progress:hover span{ height:6px; }

/* حالت تمام‌صفحه */
.ndr-sh-stage:fullscreen{ border-radius:0; background:#000; }
.ndr-sh-stage:fullscreen .ndr-sh-video video{ object-fit:contain; }
.ndr-sh-stage:-webkit-full-screen{ border-radius:0; background:#000; width:100%; height:100%; }
.ndr-sh-stage:-webkit-full-screen .ndr-sh-video video{ object-fit:contain; }

/* ---------- لایک / دیدگاه / اشتراک (کنار ویدیو) ---------- */
.ndr-sh-actions{
  position:absolute; left:calc(100% + 16px); bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.ndr-sh-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.ndr-sh-ic{
  width:48px; height:48px; border-radius:50%; background:var(--ndr-btn);
  display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s;
}
.ndr-sh-btn:hover .ndr-sh-ic{ background:var(--ndr-btn-h); }
.ndr-sh-like .ic-f{ display:none; }
.ndr-sh-like.is-liked .ic-o{ display:none; }
.ndr-sh-like.is-liked .ic-f{ display:block; color:var(--ndr-red); }
.ndr-sh-like.is-liked .ndr-sh-ic{ animation:ndr-sh-pop .35s ease; }
@keyframes ndr-sh-pop{ 50%{ transform:scale(1.18); } }
.ndr-sh-count{ font-size:12px; font-weight:600; color:#fff; }

/* ---------- کادر توضیحات و نظر (سمت چپ) ---------- */
.ndr-sh-info{
  position:absolute; left:32px; bottom:32px; z-index:5;
  width:min(440px, calc(50vw - var(--ndr-vh) * 0.28125 - 56px));
  max-height:var(--ndr-vh);
  display:flex; flex-direction:column;
  background:#000; border:1px solid var(--ndr-border); border-radius:2px;
  padding:22px 16px 16px;
}
.ndr-sh-grip{ display:none; }
.ndr-sh-title{ font-size:16px !important; font-weight:800 !important; line-height:1.8 !important; margin:0 0 4px !important; color:#fff !important; padding:0 !important; }
.ndr-sh-meta{ font-size:12px; color:#8d8d8d; display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.ndr-sh-desc{
  font-size:13.5px; line-height:2; color:#dcdcdc; margin:0 0 18px; text-align:justify;
  overflow-y:auto; max-height:40vh; white-space:pre-line;
}

/* برچسب‌ها */
.ndr-sh-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:-8px 0 16px; }
.ndr-sh-tags a{
  font-size:12px; line-height:1.9; color:#a9bcff !important; text-decoration:none !important;
  background:#121212; border:1px solid #2a2a2a; padding:1px 10px; border-radius:14px; transition:border-color .2s;
}
.ndr-sh-tags a:hover{ border-color:#5a6fb0; }

/* فهرست دیدگاه‌ها داخل همین کادر */
.ndr-sh-cm{ display:flex; flex-direction:column; min-height:0; flex:1; border-top:1px solid #262626; margin:0 -16px 12px; }
.ndr-sh-cm-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 16px; font-size:14px; }
.ndr-sh-cm-close{ color:#999 !important; }
.ndr-sh-cm-list{ overflow-y:auto; padding:0 16px; max-height:42vh; min-height:60px; }
.ndr-sh-cm-item{ padding:10px 0; border-bottom:1px solid #1d1d1d; }
.ndr-sh-cm-meta{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:700; margin-bottom:4px; }
.ndr-sh-cm-meta span{ color:#7d7d7d; font-weight:400; font-size:11px; }
.ndr-sh-cm-item p{ margin:0; font-size:13px; line-height:1.9; color:#d6d6d6; }
.ndr-sh-cm-empty{ text-align:center; color:#7d7d7d; font-size:13px; padding:20px 0; }
.ndr-sh.is-cm .ndr-sh-desc{ max-height:14vh; }

/* فرم نظر */
.ndr-sh-form{ display:flex; flex-direction:column; gap:8px; }
.ndr-sh-guest{ display:none; gap:8px; }
.ndr-sh-form.is-active .ndr-sh-guest{ display:flex; }
.ndr-sh .ndr-sh-guest input{
  flex:1; min-width:0; height:38px; background:#0d0d0d !important; color:#fff !important;
  border:1px solid var(--ndr-border) !important; border-radius:19px !important; padding:0 14px !important;
  font:inherit; font-size:12.5px; box-shadow:none !important; margin:0 !important;
}
.ndr-sh-pill{
  display:flex; align-items:center; gap:6px;
  border:1px solid #5a5a5a; border-radius:24px; padding:4px 14px 4px 8px; background:#000;
  transition:border-color .2s;
}
.ndr-sh-form.is-active .ndr-sh-pill{ border-color:#8a8a8a; }
.ndr-sh .ndr-sh-text{
  flex:1; min-width:0; resize:none; background:transparent !important; color:#fff !important;
  border:0 !important; outline:0 !important; box-shadow:none !important; padding:8px 0 !important; margin:0 !important;
  font:inherit; font-size:13.5px; line-height:1.7; max-height:120px; height:auto; min-height:0;
}
.ndr-sh .ndr-sh-text::placeholder{ color:#8a8a8a; }
.ndr-sh-send{ width:36px; height:36px; flex:0 0 36px; display:flex; align-items:center; justify-content:center; color:#cfcfcf !important; order:2; }
.ndr-sh-send svg{ transform:scaleX(-1); }
.ndr-sh-send:disabled{ opacity:.4; cursor:default; }
.ndr-sh-msg{ margin:0; font-size:12px; color:#9fb3ff; min-height:0; }
.ndr-sh-msg:empty{ display:none; }

/* ---------- قبلی / بعدی (لبه‌ی صفحه) ---------- */
.ndr-sh-nav{
  position:absolute; right:16px; top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; gap:16px;
}
.ndr-sh-nav button{
  width:48px; height:48px; border-radius:50%; background:var(--ndr-btn) !important; color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .2s, opacity .2s;
}
.ndr-sh-nav button:hover{ background:var(--ndr-btn-h) !important; }
.ndr-sh-nav button:disabled{ opacity:.35; cursor:default; }

/* ---------- پیام کوتاه ---------- */
.ndr-sh-toast{
  position:absolute; left:50%; bottom:40px; transform:translate(-50%, 20px); z-index:20;
  background:#fff; color:#111; font-size:13px; font-weight:600; padding:10px 18px; border-radius:22px;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.ndr-sh-toast.is-on{ opacity:1; transform:translate(-50%, 0); }

/* ===================================================================
   تبلت و موبایل: ویدیو تمام‌صفحه، توضیحات روی ویدیو، دیدگاه‌ها کشویی از پایین
   =================================================================== */
@media (max-width: 1000px){
  .ndr-sh-center{ padding:0; }
  .ndr-sh-player{ height:100vh; height:100dvh; width:100vw; aspect-ratio:auto; }
  .ndr-sh-stage{ border-radius:0; }
  .ndr-sh-video video{ object-fit:cover; }

  /* دکمه‌ی بستن و تمام‌صفحه جابه‌جا نشوند */
  .ndr-sh-close{ top:calc(8px + env(safe-area-inset-top)); right:8px; background:rgba(0,0,0,.25); }
  .ndr-sh-fs{ right:60px; top:calc(18px + env(safe-area-inset-top)); }
  .ndr-sh-sound{ top:calc(18px + env(safe-area-inset-top)); }

  .ndr-sh-actions{
    left:auto; right:12px; bottom:calc(28px + env(safe-area-inset-bottom)); z-index:6; gap:16px;
  }
  .ndr-sh-ic{ background:rgba(0,0,0,.35); width:46px; height:46px; }
  .ndr-sh-count{ text-shadow:0 1px 3px rgba(0,0,0,.8); }

  .ndr-sh-progress{ bottom:env(safe-area-inset-bottom); }

  .ndr-sh-info{
    left:0; right:0; bottom:0; width:auto; max-height:none;
    border:0; border-radius:0; background:linear-gradient(transparent, rgba(0,0,0,.55) 30%, rgba(0,0,0,.9));
    padding:48px 76px calc(22px + env(safe-area-inset-bottom)) 16px;   /* سمت راست برای ستون دکمه‌ها */
    pointer-events:none;
  }
  .ndr-sh-info > *{ pointer-events:auto; }
  .ndr-sh-title{ font-size:15px !important; text-shadow:0 1px 4px rgba(0,0,0,.7); }
  .ndr-sh-desc{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    max-height:none; margin-bottom:0; font-size:13px; cursor:pointer;
  }
  .ndr-sh-desc.is-open{ -webkit-line-clamp:unset; display:block; max-height:40vh; overflow-y:auto; }
  .ndr-sh-tags{ margin:6px 0 0; flex-wrap:nowrap; overflow:hidden; }
  .ndr-sh-tags a{ background:rgba(0,0,0,.35); border-color:rgba(255,255,255,.15); white-space:nowrap; }

  /* محو شدن عنوان و کپشن هنگام پخش؛ با توقف یا باز شدن دیدگاه‌ها برمی‌گردد */
  .ndr-sh-info{ transition:opacity .35s ease, transform .35s ease; }
  .ndr-sh.is-playing:not(.is-paused):not(.is-cm) .ndr-sh-info{ opacity:0; transform:translateY(16px); }
  .ndr-sh.is-playing:not(.is-paused):not(.is-cm) .ndr-sh-info,
  .ndr-sh.is-playing:not(.is-paused):not(.is-cm) .ndr-sh-info > *{ pointer-events:none; }
  .ndr-sh-form{ display:none; }
  .ndr-sh-nav{ display:none; }

  /* پنل دیدگاه‌ها */
  .ndr-sh.is-cm .ndr-sh-info{
    background:#121212; border-radius:16px 16px 0 0; padding:8px 16px calc(12px + env(safe-area-inset-bottom));
    max-height:72dvh; z-index:8; box-shadow:0 -10px 30px rgba(0,0,0,.6);
  }
  .ndr-sh.is-cm .ndr-sh-grip{ display:block; width:40px; height:4px; border-radius:2px; background:#444; margin:0 auto 10px; }
  .ndr-sh.is-cm .ndr-sh-title, .ndr-sh.is-cm .ndr-sh-meta, .ndr-sh.is-cm .ndr-sh-desc, .ndr-sh.is-cm .ndr-sh-tags{ display:none; }
  .ndr-sh.is-cm .ndr-sh-form{ display:flex; }
  .ndr-sh.is-cm .ndr-sh-cm{ margin-top:0; border-top:0; }
  .ndr-sh.is-cm .ndr-sh-cm-list{ max-height:none; flex:1; }
  .ndr-sh.is-cm .ndr-sh-actions{ display:none; }
}

@media (max-width: 1000px) and (orientation: landscape) and (max-height: 520px){
  .ndr-sh-player{ width:auto; height:100dvh; aspect-ratio:9/16; }
  .ndr-sh-info{ padding-right:76px; }
}

@media (prefers-reduced-motion: reduce){
  .ndr-sh *{ transition:none !important; animation:none !important; }
}