/* ============================================
   v2/css/frames.css
   استایل ۱۰ قاب آواتار
   سایت اخبار استقلال — نسخه ۲
   نسخه: 2.5 — اصلاح قاب کارت کلاب و دراور
   ============================================ */

/* ============================================
   Base: wrapper قاب
   ============================================ */
.frame-preview {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}

/* ============================================
   1) قاب آبی کلاسیک (classic_blue)
   ============================================ */
.frame-classic-blue {
  border: 3px solid #1560bd;
  box-shadow: 0 0 0 1px rgba(21, 96, 189, .3), 0 4px 12px rgba(21, 96, 189, .3);
}

/* ============================================
   2) قاب آتشین (fire)
   ============================================ */
.frame-fire {
  border: 3px solid transparent;
  background: linear-gradient(135deg, #ff4500, #ff8c00, #ff4500) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  box-shadow: 0 0 20px rgba(255, 69, 0, .6), 0 0 40px rgba(255, 140, 0, .3);
  animation: frameFire 2s ease-in-out infinite;
}

@keyframes frameFire {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 69, 0, .6), 0 0 40px rgba(255, 140, 0, .3); }
  50% { box-shadow: 0 0 30px rgba(255, 69, 0, .9), 0 0 60px rgba(255, 140, 0, .5); }
}

/* ============================================
   3) قاب الماسی (diamond)
   ============================================ */
.frame-diamond {
  border: 3px solid transparent;
  background: linear-gradient(135deg, #00d2ff, #ffffff, #3a7bd5, #ffffff, #00d2ff) border-box;
  background-size: 200% 200%;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  box-shadow: 0 0 20px rgba(0, 210, 255, .6), 0 0 40px rgba(58, 123, 213, .4);
  animation: frameDiamond 3s linear infinite;
}

@keyframes frameDiamond {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================
   4) قاب ستاره‌ای (star)
   ============================================ */
.frame-star {
  border: 3px solid transparent;
  background: linear-gradient(135deg, #f5c842, #1560bd, #f5c842) border-box;
  background-size: 200% 200%;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  box-shadow: 0 0 20px rgba(245, 200, 66, .6), 0 0 40px rgba(21, 96, 189, .3);
  animation: frameStar 3s linear infinite;
}

@keyframes frameStar {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================
   5) قاب پرچم ایران (iran_flag)
   ============================================ */
.frame-iran-flag {
  border: 3px solid transparent;
  background: linear-gradient(180deg, #239f40 0%, #239f40 33%, #ffffff 33%, #ffffff 66%, #da0000 66%, #da0000 100%) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  box-shadow: 0 0 15px rgba(35, 159, 64, .5), 0 0 15px rgba(218, 0, 0, .5);
}

/* ============================================
   6) قاب فوتبالی (football)
   ============================================ */
.frame-football {
  border: 3px solid transparent;
  background: linear-gradient(135deg, #2e7d32, #66bb6a, #ffffff, #66bb6a, #2e7d32) border-box;
  background-size: 200% 200%;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  box-shadow: 0 0 20px rgba(46, 125, 50, .6), 0 0 40px rgba(102, 187, 106, .3);
  animation: frameFootball 4s linear infinite;
}

@keyframes frameFootball {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================
   7) قاب قهرمانی (champion)
   ============================================ */
.frame-champion {
  border: 4px solid transparent;
  background: linear-gradient(135deg, #ffd700, #ffed4e, #d4a017, #ffed4e, #ffd700) border-box;
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;
  box-shadow: 0 0 25px rgba(255, 215, 0, .8), 0 0 50px rgba(212, 160, 23, .5);
  animation: frameChampion 3s linear infinite;
}

@keyframes frameChampion {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ============================================
   8) قاب تاج طلایی (golden_crown) — VIP
   ============================================ */
.frame-golden-crown {
  border: 4px solid transparent;
  background: linear-gradient(135deg, #f5c842, #ffe98a, #d4a017, #ffe98a, #f5c842) border-box;
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;
  box-shadow: 0 0 25px rgba(245, 200, 66, .9), 0 0 50px rgba(212, 160, 23, .6);
  animation: frameGoldenCrown 2.5s linear infinite;
}

@keyframes frameGoldenCrown {
  0% { background-position: 0% 50%; box-shadow: 0 0 25px rgba(245, 200, 66, .9), 0 0 50px rgba(212, 160, 23, .6); }
  50% { background-position: 150% 50%; box-shadow: 0 0 35px rgba(245, 200, 66, 1), 0 0 70px rgba(212, 160, 23, .8); }
  100% { background-position: 300% 50%; box-shadow: 0 0 25px rgba(245, 200, 66, .9), 0 0 50px rgba(212, 160, 23, .6); }
}

/* ============================================
   9) قاب رنگین‌کمان (rainbow) — VIP
   ============================================ */
.frame-rainbow {
  border: 4px solid transparent;
  background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;
  box-shadow: 0 0 25px rgba(255, 0, 0, .5), 0 0 25px rgba(0, 0, 255, .5);
  animation: frameRainbow 4s linear infinite;
}

@keyframes frameRainbow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   10) قاب افسانه‌ای (legendary) — VIP
   ============================================ */
.frame-legendary {
  border: 4px solid transparent;
  background: linear-gradient(135deg, #ff00ff, #00ffff, #ff00ff, #ffff00, #ff00ff) border-box;
  background-size: 400% 400%;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;
  box-shadow: 0 0 30px rgba(255, 0, 255, .8), 0 0 60px rgba(0, 255, 255, .5), 0 0 90px rgba(255, 255, 0, .3);
  animation: frameLegendary 3s linear infinite;
}

@keyframes frameLegendary {
  0% { background-position: 0% 50%; }
  50% { background-position: 200% 50%; }
  100% { background-position: 400% 50%; }
}

/* ============================================
   Fallback
   ============================================ */
@supports not (mask-composite: exclude) {
  .frame-fire,
  .frame-diamond,
  .frame-star,
  .frame-iran-flag,
  .frame-football,
  .frame-champion,
  .frame-golden-crown,
  .frame-rainbow,
  .frame-legendary {
    border: 3px solid #f5c842;
    background: none;
    -webkit-mask: none;
    mask: none;
  }
}

/* ============================================
   🎯 Drawer
   ============================================ */
.drawer-avatar-wrapper {
  width: 90px;
  height: 90px;
  margin: 0 auto 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-avatar-wrapper .avatar {
  width: 76px;
  height: 76px;
  margin: 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 50%;
}

.drawer-avatar-wrapper .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* قاب دراور روی avatar (دقیقاً هم‌اندازه‌ی avatar) */
.drawer-avatar-wrapper .frame-preview {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}

/* ============================================
   🎯 Profile pages
   ============================================ */
.profile-page-avatar-wrapper,
.user-profile-avatar-wrapper {
  position: relative;
}

.profile-page-avatar-wrapper .profile-page-avatar,
.user-profile-avatar-wrapper .user-profile-avatar {
  overflow: hidden;
  border-radius: 50%;
}

.profile-page-avatar-wrapper .frame-preview,
.user-profile-avatar-wrapper .frame-preview {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}

/* ============================================
   🎯 Comments
   ============================================ */
.comment-item .comment-avatar,
.reply-item .reply-avatar {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.comment-item .comment-avatar .frame-preview,
.reply-item .reply-avatar .frame-preview {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}

/* ============================================
   🎯 Chat
   ============================================ */
.chat-msg .msg-avatar {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 34px;
  height: 34px;
}

.chat-msg .msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.chat-msg .msg-avatar .frame-preview {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}

/* ============================================
   🎯 Leaderboard
   ============================================ */
.club-lb-avatar {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

.club-lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.club-lb-avatar .frame-preview {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}

/* ============================================
   🎯 Club User Card (بالای صفحه کلاب)
   ============================================ */
.club-user-avatar {
  overflow: visible !important;
  position: relative;
}

.club-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 2;
}

.club-user-avatar .frame-preview {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

.club-user-avatar.vip-avatar .frame-preview {
  inset: -4px;
}

/* ============================================
   🎯 VIP Posts
   ============================================ */
.vip-post-author-avatar,
.vip-comment-avatar {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.vip-post-author-avatar img,
.vip-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.vip-post-author-avatar .frame-preview,
.vip-comment-avatar .frame-preview {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}