/**
 * BubbleStory – VIP crown (PNG icon, бүх төхөөрөмжинд)
 */

/* Контейнер – бусад icon-той ижил логик */
.bs-header-vip {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Clickable талбай – тойрог хүрээгүй, зөвхөн ижил хэмжээтэй */
.bs-header-vip__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
}

/* PNG icon – бүх төхөөрөмж дээр 30×30, алдагдахгүй */
.bs-header-vip__img {
  width: 30px !important;
  height: 30px !important;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: auto;
  transition:
    filter 0.2s ease,
    transform 0.15s ease;
}

/* --- ӨНГӨ ТОХИРУУЛГА + хувьсагч --- */
/* Эх PNG хар → цагаан болгож, дараа нь улаан/ногоон өнгө өгнө */

/* Жилийн эрхгүй – улаан (#E50914 орчим) */
.bs-header-vip.bs-vip--inactive {
  --vip-filter: brightness(0) saturate(100%)
                invert(17%) sepia(88%) saturate(6360%)
                hue-rotate(356deg) brightness(96%) contrast(110%);
  --vip-glow: rgba(229, 9, 20, 0.9); /* glow өнгө */
}

/* Жилийн эрхтэй – ногоон (#17D96B орчим) */
.bs-header-vip.bs-vip--active {
  --vip-filter: brightness(0) saturate(100%)
                invert(63%) sepia(68%) saturate(640%)
                hue-rotate(93deg) brightness(95%) contrast(96%);
  --vip-glow: rgba(23, 217, 107, 0.9);
}

/* Суурь filter – аль ч үед vip-filter хэрэглэнэ */
.bs-header-vip .bs-header-vip__img {
  filter: var(--vip-filter, none);
}

/* --- HOVER: дүрснээсээ гэрэлтэж байгаа мэт --- */
.bs-header-vip .bs-header-vip__link:hover .bs-header-vip__img {
  filter: var(--vip-filter, none)
          brightness(1.5)
          drop-shadow(0 0 7px var(--vip-glow, rgba(0,0,0,1)));
  transform: scale(1.3);
}

/* --- МОБАЙЛ ТУСГАЙ ЗАСВАР --- */
@media (max-width: 768px) {
  .bs-header-vip {
    display: flex !important;
  }

  .bs-header-vip__link {
    width: 40px;
    height: 40px;
  }

  .bs-header-vip__img {
    width: 30px !important;
    height: 30px !important;
  }

  .bs-header-right,
  .bs-header-icons,
  .bs-header-actions,
  .bs-header-top-right {
    width: auto !important;
    overflow: visible !important;
    flex-wrap: nowrap;
  }
}