/*!
 * NewDiv Reels — استایل کاروسل و پلیر ریلز
 * Copyright (c) 2026 NewDiv — https://new-div.ir
 * همه‌ی کلاس‌ها با پیشوند ndr- هستند تا با قالب تداخل نداشته باشند.
 */
:root{
  /* اگر قالب متغیر --me-primary داشته باشد، از همان رنگ استفاده می‌شود */
  --ndr-primary: var(--me-primary, #405098);
  --ndr-radius: var(--me-radius, 10px);
  --ndr-card-bg: var(--me-card-bg, #16161c);
}

/* ===================== ریلزها ===================== */
.ndr-reels{ margin:28px 0; }
.ndr-reels-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.ndr-reels-head-bar{ width:4px; height:20px; background:var(--ndr-primary); border-radius:2px; }
.ndr-reels-head h2{ font-size:18px; margin:0; flex:1; }
.ndr-reels-more{ color:var(--ndr-primary); text-decoration:none; font-size:13px; }

.ndr-reels-row{ position:relative; display:flex; gap:12px; }

.ndr-reels-panel{
  flex:0 0 160px;
  background:var(--ndr-primary);
  color:#fff;
  border-radius:var(--ndr-radius);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:20px 14px;text-decoration:none;
}
.ndr-reels-panel-title{ font-weight:800; font-size:16px; }
.ndr-reels-panel-sub{ font-size:12px; opacity:.85; }
.ndr-reels-panel-arrow{ font-size:20px; margin-top:8px; }

.ndr-reels-track{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  flex:1; scrollbar-width:none;
}
.ndr-reels-track::-webkit-scrollbar{ display:none; }

.ndr-reel-card{
  scroll-snap-align:start;
  flex:0 0 150px; aspect-ratio:9/16;
  position:relative; border-radius:var(--ndr-radius); overflow:hidden;
  border:none; padding:0; cursor:pointer; background:var(--ndr-card-bg);
  display:block; text-decoration:none;
}
.ndr-reel-card img{ width:100%;height:100%;object-fit:cover;display:block; }
.ndr-reel-play{
  position:absolute; top:10px; left:10px; width:30px; height:30px;
  border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.ndr-reel-title{
  position:absolute; bottom:0; right:0; left:0; padding:10px 8px;
  color:#fff; font-size:12px; font-weight:600; text-align:right;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
}

.ndr-reels-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.2); font-size:18px;
}
.ndr-reels-arrow-prev{ right:-6px; }
.ndr-reels-arrow-next{ left:-6px; }

/* ===================== پلیر ریلز (سبک آپارات شورتس) ===================== */
.ndr-reel-card{ font:inherit; color:inherit; }
.ndr-rp{
  position:fixed !important; inset:0 !important; z-index:2147483000 !important;
  background:rgba(0,0,0,.96) !important;
  display:flex !important; align-items:center; justify-content:center; gap:18px;
  direction:rtl; font-family:inherit;
}
.ndr-rp[hidden]{ display:none !important; }
html.ndr-rp-lock, html.ndr-rp-lock body{ overflow:hidden !important; }

.ndr-rp-stage{
  position:relative; height:min(92vh, 820px); aspect-ratio:9/16; max-width:100vw;
  background:#000; border-radius:14px; overflow:hidden;
}
.ndr-rp-video{ position:absolute; inset:0; }
.ndr-rp-video iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0; display:block; }

/* --- پخش MP4 عمودی --- */
.ndr-rp-video video{
  position:absolute; inset:0; width:100% !important; height:100% !important;
  object-fit:cover; background:#000; display:block; cursor:pointer;
}
.ndr-rp-hud[hidden]{ display:none !important; }
.ndr-rp-mute{
  position:absolute; top:14px; left:14px; z-index:5;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14) !important; color:#fff !important;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.ndr-rp-mute .ic-off{ display:none; }
.ndr-rp.is-muted .ndr-rp-mute .ic-on{ display:none; }
.ndr-rp.is-muted .ndr-rp-mute .ic-off{ display:block; }

.ndr-rp-bigplay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
  width:72px; height:72px; border-radius:50%; z-index:3; pointer-events:none;
  background:rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s, transform .2s;
}
.ndr-rp.is-paused .ndr-rp-bigplay{ opacity:1; transform:translate(-50%,-50%) scale(1); }

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

.ndr-rp-progress{
  position:absolute; left:0; right:0; bottom:0; height:14px; z-index:4;
  cursor:pointer; direction:ltr; display:flex; align-items:flex-end;
}
.ndr-rp-progress::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.25); }
.ndr-rp-progress span{ position:relative; height:3px; width:0; background:#fff; transition:width .25s linear; }
.ndr-rp-progress:hover::before, .ndr-rp-progress:hover span{ height:5px; }

.ndr-rp-info{
  position:absolute; right:0; left:64px; bottom:0; padding:60px 16px 16px;
  color:#fff; pointer-events:none; z-index:2;
  background:linear-gradient(transparent, rgba(0,0,0,.75));
}
.ndr-rp-title{ font-size:15px; font-weight:700; margin:0 0 6px; color:#fff; }
.ndr-rp-desc{ font-size:12.5px; line-height:1.8; margin:0; color:#ddd;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.ndr-rp-actions{
  position:absolute; left:8px; bottom:70px; z-index:3;
  display:flex; flex-direction:column; gap:18px; align-items:center;
}
.ndr-rp-btn{
  background:none !important; border:0 !important; padding:0 !important; cursor:pointer;
  color:#fff !important; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.ndr-rp-btn svg{
  width:46px; height:46px; padding:10px; border-radius:50%;
  background:rgba(255,255,255,.14); transition:transform .15s, background .15s;
}
.ndr-rp-btn:hover svg{ background:rgba(255,255,255,.25); }
.ndr-rp-btn.is-liked svg{ color:#ff3b5c; background:rgba(255,59,92,.18); transform:scale(1.08); }
.ndr-rp-count{ font-size:11.5px; font-weight:600; color:#fff; }

.ndr-rp-close{
  position:absolute; top:14px; right:14px; z-index:5;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:18px;
}
.ndr-rp-nav{ display:flex; flex-direction:column; gap:12px; }
.ndr-rp-nav button{
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center;
}
.ndr-rp-nav button:hover{ background:rgba(255,255,255,.28); }

/* پنل دیدگاه‌ها */
.ndr-rp-cm{
  position:absolute; inset:auto 0 0 0; height:65%; z-index:6;
  background:#16181b; color:#eee; border-radius:16px 16px 0 0;
  display:flex; flex-direction:column; box-shadow:0 -8px 24px rgba(0,0,0,.5);
}
.ndr-rp-cm[hidden]{ display:none !important; }
.ndr-rp-cm-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #2a2d31; }
.ndr-rp-cm-close{ background:none; border:0; color:#aaa; font-size:16px; cursor:pointer; }
.ndr-rp-cm-list{ flex:1; overflow-y:auto; padding:10px 16px; }
.ndr-rp-cm-item{ padding:9px 0; border-bottom:1px solid #22252a; }
.ndr-rp-cm-meta{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }
.ndr-rp-cm-meta span{ color:#888; font-size:11px; }
.ndr-rp-cm-item p{ margin:0; font-size:13px; line-height:1.8; color:#ddd; }
.ndr-rp-cm-empty{ text-align:center; color:#888; font-size:13px; padding:24px 0; }
.ndr-rp-cm-form{ padding:10px 12px; border-top:1px solid #2a2d31; display:flex; flex-direction:column; gap:6px; }
.ndr-rp-cm-form input, .ndr-rp-cm-form textarea{
  width:100%; background:#0f1113 !important; color:#fff !important; border:1px solid #2f3338 !important;
  border-radius:8px; padding:8px 10px; font:inherit; font-size:13px; resize:none;
}
.ndr-rp-cm-row{ display:flex; gap:6px; align-items:stretch; }
.ndr-rp-cm-send{ flex:0 0 auto; padding:0 16px; border:0; border-radius:8px; cursor:pointer; background:#405098; color:#fff; font:inherit; }
.ndr-rp-cm-send:disabled{ opacity:.6; }
.ndr-rp-cm-msg{ margin:0; font-size:12px; color:#9fb3ff; min-height:1em; }

@media (max-width: 600px){
  .ndr-rp{ gap:0; }
  .ndr-rp-stage{ height:100vh; height:100dvh; width:100vw; aspect-ratio:auto; border-radius:0; }
  .ndr-rp-nav{ display:none; }  /* در موبایل: کشیدن انگشت بالا/پایین */
}


/* جلوگیری از تأثیر استایل دکمه‌های قالب روی کارت‌ها */
.ndr-reel-card, .ndr-reels-arrow{ -webkit-appearance:none; appearance:none; line-height:1; }
.ndr-reel-card:focus-visible, .ndr-rp button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* کارت‌های کوچک‌تر در تبلت و موبایل */
@media (max-width: 782px){
  .ndr-reel-card{ flex-basis:120px; }
}