/*!
 * vip-badge.css — знакът за ПЛАТЕН VIP (не по ранг).
 *
 *   вариант В · лента „VIP“ до името        → .vip-ribbon  (vip-ui.js: data-vip="rank")
 *   вариант Г · двойна златна рамка на аватара → .vip-gold   (vip-ui.js: decorateAvatar)
 *
 * Слага се САМО при user.vip === true. Купените козметики (vip.css:
 * .frm-, .nm-, .vip-badge- и .vip-title) си остават както са — този файл
 * не презаписва нито един техен селектор, само добавя свои класове.
 *
 * Зарежда се от <link> в <head>; ако липсва, vip-ui.js го вмъква сам при
 * първия платен VIP, за да не остане лентата гол текст.
 * ========================================================= */

/* ─────────────────────────────────────────────────────────
   1. ЛЕНТА до името (вариант В)
   Малка златна лента, чете се като линия, не като етикет.
   ───────────────────────────────────────────────────────── */
.vip-ribbon{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  background:linear-gradient(#e6cf8e,#c9a227);
  color:#241d0c;
  font:600 8px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.24em;
  /* дребни предпазни — не пипат мярката от варианта */
  border:0;
  border-radius:1px;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto;
  align-self:center;
  vertical-align:middle;
  margin-left:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 -1px 0 rgba(0,0,0,.16) inset;
  user-select:none;
}

/* в тесните класации (22–28 px аватари) лентата слиза с една стъпка,
   за да не вдига реда — същата мярка, която cosmetics.css дава на значките */
.lb-nm .vip-ribbon,
.dc-board .lb-nm .vip-ribbon{
  margin-left:4px;
  padding:1px 4px;
  font-size:7px;
  letter-spacing:.18em;
  border-radius:2px;
}

/* ─────────────────────────────────────────────────────────
   2. ДВОЙНА ЗЛАТНА РАМКА на аватара (вариант Г)
   Вътрешна линия = outline по канта; външна = ::after с inset:-4px.
   outline не се реже от overflow:hidden и не се бие с box-shadow
   на купените рамки (.frm-*), затова е вътрешната линия.
   ───────────────────────────────────────────────────────── */
.vip-gold{
  position:relative;
  outline:1px solid rgba(230,207,142,.55);
  outline-offset:0;
}
.vip-gold::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(230,207,142,.50);
  border-radius:inherit;
  pointer-events:none;
  z-index:3;
}

/* купена рамка вече държи ::after → оставяме само външната линия */
.vip-gold[class*="frm-"]::after{ display:none }
.vip-gold[class*="frm-"]{ outline-offset:4px }

/* хедърът и форумът слагат overflow:hidden на аватара (app.css:782),
   което реже ::after → там пръстенът минава с box-shadow.
   При купена рамка box-shadow-ът ѝ е с !important, затова тогава
   остава само външната линия от outline (правилото по-горе). */
.userchip .vip-gold::after,
.post .vip-gold::after{ display:none }
.userchip .vip-gold:not([class*="frm-"]),
.post .vip-gold:not([class*="frm-"]){
  outline:none;
  box-shadow:
    inset 0 0 0 1px rgba(230,207,142,.55),
    0 0 0 3px rgba(11,16,15,.92),
    0 0 0 4px rgba(230,207,142,.50);
}

/* ─────────────────────────────────────────────────────────
   3. Дребни несъвместимости
   ───────────────────────────────────────────────────────── */
/* при „намалено движение“ нищо не се движи (няма анимации, но за ред) */
@media (prefers-reduced-motion:reduce){
  .vip-ribbon,.vip-gold{ transition:none }
}

/* много тесен екран: още една стъпка надолу, за да не увисва на втори ред */
@media (max-width:420px){
  .lb-nm .vip-ribbon{
    font-size:6.5px;
    padding:1px 3px;
    letter-spacing:.14em;
  }
}