/* ════════════════════════════════════════════════════════════
   VIP SYSTEM  —  badges · sidebar · animations
   Huanha.shop  |  vip.css
════════════════════════════════════════════════════════════ */

/* ═══ COLOUR TOKENS ══════════════════════════════════════ */
:root {
  --vip-bronze-a:  #cd7f32;
  --vip-bronze-b:  #e8a25e;
  --vip-silver-a:  #9ea8b3;
  --vip-silver-b:  #d4dde8;
  --vip-gold-a:    #c8922a;
  --vip-gold-b:    #ffd700;
  --vip-gold-c:    #fff1a0;
  --vip-diamond-a: #5fc8f4;
  --vip-diamond-b: #a8edff;
  --vip-diamond-c: #e0faff;
}

/* ═══ SIDEBAR USER AVATAR ════════════════════════════════ */
.sb-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

/* Avatar circle */
.sb-user-avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#6c5ce7,#a29bfe);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
}

/* Tier-specific avatar backgrounds */
.sb-user-avatar--bronze  { background: linear-gradient(135deg,#8b4513,#cd7f32,#e8a25e); }
.sb-user-avatar--silver  { background: linear-gradient(135deg,#4a5568,#9ea8b3,#d4dde8); }
.sb-user-avatar--gold    { background: linear-gradient(135deg,#92611a,#c8922a,#ffd700); }
.sb-user-avatar--diamond { background: linear-gradient(135deg,#0a4f6e,#5fc8f4,#a8edff); }
.sb-user-avatar--none    { background: linear-gradient(135deg,#6c5ce7,#a29bfe); }

.sb-avatar-initial {
  position: relative;
  z-index: 2;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  font-size: 1.1rem;
  font-weight: 900;
}

/* Animated glow ring for VIP tiers */
.sb-avatar-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: avatarRingSpin 3s linear infinite;
  z-index: 1;
  pointer-events: none;
}
.sb-avatar-ring--bronze  {
  background: conic-gradient(from 0deg, #cd7f32, #e8a25e, #cd7f32) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  box-shadow: 0 0 8px rgba(205,127,50,.55);
}
.sb-avatar-ring--silver  {
  background: conic-gradient(from 0deg, #9ea8b3, #d4dde8, #9ea8b3) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  box-shadow: 0 0 8px rgba(196,210,228,.45);
}
.sb-avatar-ring--gold    {
  background: conic-gradient(from 0deg, #c8922a, #ffd700, #fff1a0, #c8922a) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  box-shadow: 0 0 10px rgba(255,215,0,.7);
}
.sb-avatar-ring--diamond {
  background: conic-gradient(from 0deg, #5fc8f4, #a8edff, #e0faff, #5fc8f4) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  box-shadow: 0 0 12px rgba(168,237,255,.75);
  animation-duration: 1.8s;
}
@keyframes avatarRingSpin {
  to { transform: rotate(360deg); }
}

/* User info text */
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name {
  font-size: .82rem;
  font-weight: 700;
  color: #f0f2f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-user-email {
  font-size: .68rem;
  color: rgba(240,242,248,.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* VIP tag under username in sidebar */
.sb-user-vip-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 6px;
  margin-top: 3px;
  border: 1px solid;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.sb-user-vip-tag--bronze  { color:#cd7f32; border-color:rgba(205,127,50,.4); background:rgba(205,127,50,.1); }
.sb-user-vip-tag--silver  { color:#c8d6e5; border-color:rgba(200,214,229,.3); background:rgba(200,214,229,.08); }
.sb-user-vip-tag--gold    {
  color:#ffd700;
  border-color:rgba(255,215,0,.45);
  background:rgba(255,215,0,.1);
  text-shadow:0 0 6px rgba(255,215,0,.4);
}
.sb-user-vip-tag--diamond {
  color:#a8edff;
  border-color:rgba(168,237,255,.45);
  background:rgba(168,237,255,.08);
  text-shadow:0 0 6px rgba(168,237,255,.5);
}
/* shimmer on gold/diamond tag */
.sb-user-vip-tag--gold::after,
.sb-user-vip-tag--diamond::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: vipShimmer 2.2s infinite;
}

/* ═══ VIP PROMO STRIP (non-VIP members) ═════════════════ */
.sb-vip-promo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(108,92,231,.18), rgba(162,155,254,.1));
  border: 1px solid rgba(162,155,254,.25);
  color: rgba(240,242,248,.65);
  font-size: .74rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
}
.sb-vip-promo:hover { opacity: .8; }
.sb-vip-promo i:first-child { color: #ffd700; font-size: .8rem; }
.sb-vip-promo b { color: #a29bfe; }

/* ═══ SIDEBAR VIP CARD (real VIP tiers only) ═══════════ */
.sb-vip-card {
  position: relative;
  margin: 0 0 8px;
  padding: 11px 13px 10px;
  border-radius: 14px;
  border: 1px solid var(--vip-color, rgba(255,255,255,.12));
  overflow: hidden;
  cursor: default;
}
/* tier-specific backgrounds */
.sb-vip-card--bronze  { background: linear-gradient(135deg,rgba(139,69,19,.22),rgba(205,127,50,.1)); }
.sb-vip-card--silver  { background: linear-gradient(135deg,rgba(74,85,104,.22),rgba(158,168,179,.1)); }
.sb-vip-card--gold    { background: linear-gradient(135deg,rgba(146,97,26,.28),rgba(255,215,0,.1)); }
.sb-vip-card--diamond { background: linear-gradient(135deg,rgba(10,79,110,.28),rgba(168,237,255,.1)); }

/* animated shine sweep */
.sb-vip-card__shine {
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%);
  animation: sbCardShine 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sbCardShine {
  0%,60% { left: -100%; }
  100%    { left: 160%; }
}

.sb-vip-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.sb-vip-icon {
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 5px var(--vip-color, rgba(255,215,0,.6)));
  flex-shrink: 0;
  animation: iconPulse 2.5s ease-in-out infinite;
}
@keyframes iconPulse {
  0%,100% { filter: drop-shadow(0 0 4px var(--vip-color, rgba(255,215,0,.5))); }
  50%     { filter: drop-shadow(0 0 10px var(--vip-color, rgba(255,215,0,.9))); }
}

.sb-vip-name {
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: var(--vip-gradient, rgba(240,242,248,.4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sb-vip-label {
  font-size: .65rem;
  color: rgba(240,242,248,.38);
  margin-top: 2px;
}

/* Progress bar */
.sb-vip-progress-wrap {
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
  position: relative;
}
.sb-vip-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--vip-gradient, rgba(255,255,255,.4));
  box-shadow: 0 0 6px var(--vip-color, rgba(255,255,255,.3));
  transition: width .8s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
/* glitter on progress fill */
.sb-vip-progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: progressGlitter 2s ease-in-out infinite;
}
@keyframes progressGlitter {
  0%   { left: -60%; }
  100% { left: 130%; }
}
.sb-vip-progress-txt {
  display: flex;
  justify-content: space-between;
  font-size: .61rem;
  color: rgba(240,242,248,.32);
}

/* ═══ INLINE VIP BADGE (profile card, homepage) ════════ */
.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 9px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  border: 1.5px solid;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform .15s;
}
.vip-badge:hover { transform: scale(1.04); }

/* none handled separately as .vip-badge-member */
.vip-badge-member {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .67rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(240,242,248,.4);
  background: rgba(255,255,255,.04);
  white-space: nowrap;
}

/* ── Bronze ── */
.vip-badge.bronze {
  background: linear-gradient(135deg,rgba(139,69,19,.25),rgba(205,127,50,.15));
  border-color: rgba(205,127,50,.5);
  color: #e8a25e;
  box-shadow: 0 0 10px rgba(205,127,50,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
/* ── Silver ── */
.vip-badge.silver {
  background: linear-gradient(135deg,rgba(74,85,104,.25),rgba(196,210,228,.1));
  border-color: rgba(196,210,228,.45);
  color: #d4dde8;
  box-shadow: 0 0 10px rgba(196,210,228,.2), inset 0 1px 0 rgba(255,255,255,.1);
}
/* ── Gold ── */
.vip-badge.gold {
  background: linear-gradient(135deg,rgba(146,97,26,.3),rgba(255,215,0,.15));
  border-color: rgba(255,215,0,.55);
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,.5);
  box-shadow: 0 0 14px rgba(255,215,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
/* ── Diamond ── */
.vip-badge.diamond {
  background: linear-gradient(135deg,rgba(10,79,110,.3),rgba(168,237,255,.12));
  border-color: rgba(168,237,255,.55);
  color: #a8edff;
  text-shadow: 0 0 10px rgba(168,237,255,.6);
  box-shadow: 0 0 18px rgba(168,237,255,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

/* badge icon */
.vb-icon { font-size: .95em; line-height: 1; }

/* shimmer on all real-vip badges */
.vip-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: vipShimmer 2.6s ease-in-out infinite;
}
@keyframes vipShimmer {
  0%,30% { left: -80%; }
  100%   { left: 130%; }
}

/* ═══ HOMEPAGE VIP MINI-ROW (below profile card) ══════  */
/* Removed — VIP info lives in sidebar only */
.hd-vip-row { display: none !important; }

/* ═══ VIP LEVEL-UP ANIMATION OVERLAY ════════════════════ */
.vip-levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.vip-levelup-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.vip-levelup-card {
  position: relative;
  text-align: center;
  padding: 40px 36px 32px;
  border-radius: 24px;
  background: rgba(18,20,30,.92);
  border: 1.5px solid var(--vu-color, rgba(255,215,0,.4));
  box-shadow: 0 0 40px var(--vu-glow-color, rgba(255,215,0,.18)),
              0 24px 60px rgba(0,0,0,.6);
  max-width: 340px;
  width: 90%;
  transform: scale(.88) translateY(30px);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
.vip-levelup-overlay.show .vip-levelup-card { transform: none; }

/* shine sweep */
.vip-levelup-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  animation: sbCardShine 2.8s ease-in-out infinite;
  pointer-events: none;
}

.vip-levelup-emoji {
  display: block;
  font-size: 3.8rem;
  margin-bottom: 12px;
  animation: emojiPop .4s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 0 12px var(--vu-color, rgba(255,215,0,.6)));
}
@keyframes emojiPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.vip-levelup-title {
  font-size: .85rem;
  font-weight: 600;
  color: rgba(240,242,248,.65);
  margin-bottom: 6px;
  animation: vuSlide .4s ease .15s both;
}
.vip-levelup-name {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: .06em;
  background: var(--vu-gradient, linear-gradient(135deg,#ffd700,#fff1a0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  animation: vuSlide .4s ease .25s both;
}
.vip-levelup-sub {
  font-size: .8rem;
  color: rgba(240,242,248,.45);
  margin-bottom: 24px;
  animation: vuSlide .4s ease .35s both;
}
@keyframes vuSlide {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
.vip-levelup-close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 30px;
  border-radius: 22px;
  border: 1.5px solid var(--vu-color, rgba(255,215,0,.4));
  background: rgba(255,255,255,.06);
  color: var(--vu-color-solid, #ffd700);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s;
  animation: vuSlide .4s ease .45s both;
}
.vip-levelup-close:hover { opacity: .8; transform: scale(1.04); }

/* Stars burst container */
.vu-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.vu-star {
  position: absolute;
  font-size: 1.15rem;
  animation: vuStarFly 1.4s ease-out forwards;
  opacity: 0;
}
@keyframes vuStarFly {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(0deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4) rotate(180deg); }
}