/* TOP/VIP badges — единая цветовая и анимационная система (ТЗ 2026-08-12).
   Один файл, подключаемый на все страницы, где встречаются эти бейджи — чтобы цвета/анимация
   не могли разойтись по стилям, как это уже случилось раньше (ads.jsp/index.jsp использовали
   finda-2026.css с одними цветами, single_ad.jsp/single_shop.jsp — finda-neo.css, где .b-vip/.b-top
   не были определены вовсе, бейджи рендерились совсем без стиля).

   Не покрыто этим заходом: личный кабинет владельца (profile.jsp, раздел "Мои объявления" —
   таймер оставшегося срока + кнопка быстрого продления) — этот файл сейчас пересекается с
   незакоммиченной параллельной работой, отложено до её разрешения. */

:root {
  --top-accent: #FFB800;
  --top-text-on-accent: #7A4B00;
  --top-bg-light: #FFF6DF;
  --vip-grad-start: #0B2D6B;
  --vip-grad-end: #14449E;
  --vip-text: #FFE9A8;
  --vip-bg-light: #E8F0FE;
}

.badge-tv {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: .3px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-tv + .badge-tv {
  margin-left: 4px; /* TOP+VIP рядом, не сливаются */
}

.badge-tv svg {
  width: 10px;
  height: 10px;
  flex: none;
}

.badge-tv.b-top-2026 {
  background: var(--top-accent);
  color: var(--top-text-on-accent);
  animation: badge-top-pulse 2.2s ease-in-out infinite;
}

.badge-tv.b-vip-2026 {
  background: linear-gradient(135deg, var(--vip-grad-start), var(--vip-grad-end));
  color: var(--vip-text);
  position: relative;
  overflow: hidden;
}

/* Диагональный блик слева направо: 2.8с сама прогонка + пауза перед повтором (итого цикл 4.5с) */
.badge-tv.b-vip-2026::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: badge-vip-sheen 4.5s ease-in-out infinite;
}

@keyframes badge-top-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 0, .55); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 184, 0, 0); }
}

@keyframes badge-vip-sheen {
  0%   { left: -60%; }
  62%  { left: 130%; } /* прогонка занимает 2.8с из 4.5с цикла */
  100% { left: 130%; } /* держим офскрин до конца цикла — это и есть пауза перед повтором */
}

/* Админка: статичный компактный вариант — анимация отвлекает при сканировании таблицы */
.badge-tv.badge-tv-static {
  animation: none !important;
}
.badge-tv.badge-tv-static.b-vip-2026::after {
  animation: none !important;
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .badge-tv.b-top-2026 { animation: none; }
  .badge-tv.b-vip-2026::after { animation: none; content: none; }
}