/* 👑 VIP — the crown badge next to a VIP-only menu item (today: Spotify).
   Owner decision 2026-10-02 (docs/DONTES-CSOMAGOK-2026-10-02.md): what is VIP must say so in the menu.
   Own file on purpose: skin.css / ringfeny.css are shared sheets every parallel session edits (and whose
   versions a dozen tests pin), and the page sheets must stay scoped to their page.
   `!important` because both skins paint .nav-badge with a higher specificity. Loaded after ringfeny.css. */
.nav-item .nav-badge.nav-badge-vip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255, 207, 77, .18) !important;
  color: #ffcf4d !important;
  border: 1px solid rgba(255, 207, 77, .55);
}
:root[data-theme="light"] .nav-item .nav-badge.nav-badge-vip {
  background: #fff4cc !important;
  color: #7a5200 !important;
  border-color: #e0b84a;
}
.nav-item .nav-badge.nav-badge-vip .ti { font-size: 1.15em; line-height: 1; }

/* While the product is FREE, Spotify is open to everyone (owner, 2026-10-04) — no VIP badge next to it.
   app.js sets .promo-free on <html> from /api/me's promo state; the paid period brings the badge back. */
.promo-free .nav-item[data-view="spotify"] .nav-badge-vip { display: none; }