/* =====================================================================
   AvaPay v76 — هیرو داشبورد
   (۱) دایره‌ی استوری داخل هدر، کنار زنگوله (چشمک‌زن و جلب توجه)
   (۲) رفع پرش بخش موجودی هنگام لود
   این فایل بعد از ava-hero.css و ava-hero-fixed.css لود می‌شود.
   ===================================================================== */

/* ---------- ردیف بالا: سه ستونه تا برند همیشه دقیقاً وسط بماند ---------- */
html body #avaHero .avh-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
html body #avaHero .avh-top > .avh-av{justify-self:start}
html body #avaHero .avh-top > .avh-tr{justify-self:end}
html body #avaHero .avh-tr{display:flex;align-items:center;gap:10px;direction:rtl}
html body #avaHero .avh-story-slot{display:contents}

/* ---------- (۱) دایره‌ی استوری در هدر ---------- */
html body #avaHero .ava-story-bubble.in-hero{
  position:relative !important;inset:auto !important;bottom:auto !important;left:auto !important;right:auto !important;
  z-index:3;flex:none;width:46px;height:46px;margin:0;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;overflow:visible;
  background:radial-gradient(circle at 30% 25%,#3B1B7A,#12061F 70%) !important;
  box-shadow:0 0 0 2px rgba(10,4,30,.9),0 8px 22px -6px rgba(255,59,92,.75);
  -webkit-tap-highlight-color:transparent;transition:transform .2s ease
}
html body #avaHero .ava-story-bubble.in-hero[style*="display: none"],
html body #avaHero .ava-story-bubble.in-hero[style*="display:none"]{display:none !important}
html body #avaHero .ava-story-bubble.in-hero:active{transform:scale(.9)}

/* حلقه‌ی گرادیانی چرخان، کمی ضخیم‌تر و درخشان‌تر */
html body #avaHero .ava-story-bubble.in-hero .ava-story-ring{
  inset:-4px;
  background:conic-gradient(from 0deg,#FF3B5C,#FF7A59,#FFD93D,#A855F7,#3D7BFF,#FF3B5C);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  filter:drop-shadow(0 0 6px rgba(255,90,120,.65));
  animation:avaStoryRingSpin 2.4s linear infinite
}
/* هاله‌ی تپنده (موج) دور دایره */
html body #avaHero .ava-story-bubble.in-hero::before,
html body #avaHero .ava-story-bubble.in-hero::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,90,120,.75);opacity:0;animation:avhStoryPing 2.2s cubic-bezier(.2,.7,.3,1) infinite
}
html body #avaHero .ava-story-bubble.in-hero::after{animation-delay:1.1s;border-color:rgba(168,85,247,.75)}
@keyframes avhStoryPing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}

/* تصویر کوچک استوری */
html body #avaHero .ava-story-bubble.in-hero img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border:2px solid #0B0626;box-sizing:border-box}
html body #avaHero .ava-story-bubble.in-hero > i{font-size:16px;color:#FFD93D !important;animation:avhStoryWiggle 3.2s ease-in-out infinite}
@keyframes avhStoryWiggle{0%,78%,100%{transform:rotate(0)}82%{transform:rotate(-14deg)}86%{transform:rotate(12deg)}90%{transform:rotate(-8deg)}94%{transform:rotate(4deg)}}

/* برچسب «جدید» زیر دایره */
html body #avaHero .ava-story-bubble.in-hero .ava-story-new{
  position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);z-index:2;
  font:900 8.5px/1 Vazirmatn,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;white-space:nowrap;
  padding:3px 6px 3px;border-radius:99px;color:#fff !important;
  background:linear-gradient(135deg,#FF3B5C,#A855F7);
  box-shadow:0 0 0 2px #0B0626,0 4px 10px -2px rgba(255,59,92,.7);
  animation:avhStoryTag 2.2s ease-in-out infinite
}
@keyframes avhStoryTag{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.1)}}

/* دیده‌شده: آرام و خاکستری، بدون جلب توجه */
html body #avaHero .ava-story-bubble.in-hero.seen{box-shadow:0 0 0 2px rgba(10,4,30,.9)}
html body #avaHero .ava-story-bubble.in-hero.seen .ava-story-ring{background:conic-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4));filter:none;animation:none}
html body #avaHero .ava-story-bubble.in-hero.seen::before,
html body #avaHero .ava-story-bubble.in-hero.seen::after,
html body #avaHero .ava-story-bubble.in-hero.seen .ava-story-new{display:none}
html body #avaHero .ava-story-bubble.in-hero.seen > i{animation:none;color:#fff !important}

/* ---------- (۳) رفع پرش هنگام لود داشبورد ----------
   هنگام باز شدن صفحه، نوار نوری روی مبلغ (.avh-amt::after) یک کادر روشن مستطیلی نشان می‌داد
   و واترمارک بزرگ «AVA PAY» اول پررنگ دیده می‌شد و بعد محو می‌شد. هر دو از ابتدا در حالت نهایی ثابت شدند. */
html body #avaHero .avh-amt::after{display:none !important;animation:none !important}
html body #avaHero .avh-amt{overflow:visible !important}
html[data-theme][data-theme][data-theme] body #avaHero .avh-wm{opacity:.06 !important;animation:none !important;transition:none !important;mix-blend-mode:normal !important}

/* گوشی‌های ضعیف / حالت سبک: بدون blur و انیمیشن */
html.ava-lite body #avaHero .ava-story-bubble.in-hero::before,
html.ava-lite body #avaHero .ava-story-bubble.in-hero::after{display:none}
@media (prefers-reduced-motion:reduce){
  html body #avaHero .ava-story-bubble.in-hero::before,
  html body #avaHero .ava-story-bubble.in-hero::after,
  html body #avaHero .ava-story-bubble.in-hero .ava-story-new,
  html body #avaHero .ava-story-bubble.in-hero > i{animation:none !important}
}