.anamis-story { margin-bottom:20px; }
.storiesWrapper { display:flex; justify-content:center; gap:15px; }
.stories.carousel .story > .item-link > .info .name { font-weight:600; }
#zuck-modal-content .story-viewer .head .left > .back { font-size:28px; position:absolute; right:20px; top:30px; color:#fff; }
/* ===== کادر نمایش استوری با نسبت ثابت 3:2 و مرکز شدن ===== */
/* برای ویدئوها به‌صورت پیش‌فرض در دسکتاپ همچنان پرکن (cover) بماند */
#zuck-modal-content .story-viewer .slides .item.is-video > .media video,
#zuck-modal-content .story-viewer .slides .item.is-video > .media:is(video){
  object-fit: cover !important;
  object-position: center center !important;
}

/* در موبایل/تبلت و/یا نسبت‌های خیلی باریک: ویدئو کامل دیده شود (contain) */
@media (max-width: 1024px),
       (max-aspect-ratio: 3/4) {
  #zuck-modal-content .story-viewer .slides .item.is-video > .media video,
  #zuck-modal-content .story-viewer .slides .item.is-video > .media:is(video){
    object-fit: contain !important;     /* بدون برش */
    background: #000;                   /* نوارهای سیاه اطراف */
  }
}

/* اگر بالای استوری هدری داری، ارتفاع امن کم شود تا کامل جا بگیرد */
#zuck-modal-content .story-viewer .slides .item > .media{
  --zuck-safe-top: 0px;               /* در صورت نیاز کم/زیاد کن */
  max-height: calc(100vh - var(--zuck-safe-top));
  width: min(100vw, calc((100vh - var(--zuck-safe-top)) * 1.5)); /* 1.5 = 3/2 */
}
/***ابعاد عکس استوری****/
/* فقط برای عکس‌ها (آیتم‌هایی که با JS کلاس is-photo گرفته‌اند) */
#zuck-modal-content .story-viewer .slides .item.is-photo > .media,
#zuck-modal-content .story-viewer .slides .item.is-photo > .media:is(img),
#zuck-modal-content .story-viewer .slides .item.is-photo > .media img{
  height: auto !important;
  top: 50% !important;
  bottom: 50% !important;
}

/* فقط کلوز سفارشی خودم را نگه دار */
#zuck-modal-content .story-viewer a.close{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* استایل دکمه‌ی سفارشی: دایره‌ای با بک‌گراند مات */
#zuck-custom-close{
  position:fixed;
  top:28px; left:20px;
  width:44px; height:44px;
  display:flex;                /* همیشه دیده شود؛ JS هم کنترل می‌کند */
  align-items:center; justify-content:center;
  color:#fff; font-size:26px; text-decoration:none;
  border-radius:50%;
  z-index:2147483647;          /* همیشه بالاتر از همه */
}
#zuck-custom-close::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  z-index:-1;
}
#zuck-custom-close:hover::before{ background:rgba(0,0,0,.45); }

/* مزاحمت فلش چپ با × */
#zuck-modal-content .story-viewer .slides-pointers .previous,
#zuck-modal-content .story-viewer .slides-pointers .left{ left:64px !important; }

/* موبایل */
@media (max-width:1024px){
  #zuck-custom-close{ top:22px; left:16px; width:40px; height:40px; font-size:24px; }
  #zuck-modal-content .story-viewer .slides-pointers .previous,
  #zuck-modal-content .story-viewer .slides-pointers .left{ left:56px !important; }
}
/**هاور **/
/* ====== Hover & Title for Zuck Stories ====== */

/* متغیرهای افکت */
.stories{
  --hover-scale: 1.06;
  --hover-glow: 0 8px 28px rgba(255, 0, 102, .25);
  --hover-ring: conic-gradient(from 0deg,
    #ff5e8a, #ffb86c, #ffd56a, #7ee787, #7aa2ff, #ff5e8a);
}

/* لینک هر استوری (آواتار + عنوان) */
.stories .story .item-link{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform .25s ease, filter .25s ease;
  will-change: transform, filter;
}

/* آواتار/پیش‌نمایش */
.stories .story .item-link .item-preview,
.stories .story .item-link .avatar{
  position: relative;
  display: inline-block;
  border-radius: 9999px;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
}

/* حلقه گرادیانی دور آواتار */
.stories .story .item-link .item-preview::before,
.stories .story .item-link .avatar::before{
  content:"";
  position: absolute;
  inset: -3px;                 /* ضخامت حلقه */
  border-radius: inherit;
  background: var(--hover-ring);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: -1;                 /* پشت آواتار بماند */
}

/* تصویر آواتار */
.stories .story .item-link .item-preview img,
.stories .story .item-link .avatar img{
  display: block;
  border-radius: inherit;
  transform: translateZ(0);
}

/* ====== عنوان: همیشه دیده شود با بک‌گراند نرم ====== */
.stories .story .item-link .info .name{
  position: relative;
  padding: 4px 10px;
  border-radius: 9999px;
 /* background: rgba(180,37,97,100);         /* نرم */
  color: #0c0a0a;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 1;                          /* همیشه نمایان */
  transform: translateY(0);
  white-space: nowrap;
  transition:
    background .25s ease,
    backdrop-filter .25s ease,
    -webkit-backdrop-filter .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

/* ====== حالت هاور/فوکوس: افکت جذاب ====== */
.stories .story .item-link:hover,
.stories .story .item-link:focus-visible{
  transform: translateY(-2px);
}

/* بزرگ‌نمایی لطیف آواتار + درخشش */
.stories .story .item-link:hover .item-preview,
.stories .story .item-link:hover .avatar,
.stories .story .item-link:focus-visible .item-preview,
.stories .story .item-link:focus-visible .avatar{
  transform: scale(var(--hover-scale));
  box-shadow: var(--hover-glow);
}

/* حلقه گرادیانی نمایان شود */
.stories .story .item-link:hover .item-preview::before,
.stories .story .item-link:hover .avatar::before,
.stories .story .item-link:focus-visible .item-preview::before,
.stories .story .item-link:focus-visible .avatar::before{
  opacity: 1;
  transform: rotate(12deg);
}

/* عنوان قوی‌تر و کمی بالا بیاید */
.stories .story .item-link:hover .info .name,
.stories .story .item-link:focus-visible .info .name{
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* کلیک لحظه‌ای */
.stories .story .item-link:active .item-preview,
.stories .story .item-link:active .avatar{
  transform: scale(1.02);
}

/* احترام به کاهش موشن */
@media (prefers-reduced-motion: reduce){
  .stories .story .item-link,
  .stories .story .item-link .item-preview,
  .stories .story .item-link .avatar,
  .stories .story .item-link .info .name{
    transition: none !important;
  }
}
/**پایان هاور*
/*ناوبری قبل و بعد جابجا**/