/*!
 * 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;
  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;
}
/* نسبت ۹:۱۶ با روش padding (روی همه‌ی نسخه‌های iOS و مرورگرهای قدیمی کار می‌کند)؛
   ارتفاع کارت به بارگذاری تصویر یا پشتیبانی از aspect-ratio وابسته نیست */
.ndr-reel-card::before{ content:""; display:block; padding-top:177.7778%; }
.ndr-reel-card img{ position:absolute; top:0; right:0; bottom:0; left:0; 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, .ndr-reels-arrow{ -webkit-appearance:none; appearance:none; line-height:1; }
.ndr-reel-card:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

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

/* صفحه‌ی لمسی: با کشیدن انگشت جابه‌جا می‌شود؛ دکمه‌ها روی کارت‌ها را نمی‌پوشانند */
@media (hover: none){
  .ndr-reels-arrow{ display:none; }
}

.ndr-reel-card img{ transition:transform .35s ease; }
.ndr-reel-card:hover img{ transform:scale(1.05); }