@charset "UTF-8";
/* Эффекты карточек анкет пака. Файл подключается mu-плагином zz-pack-effects.php
   и намеренно лежит отдельно от output.css: тот пересобирается Tailwind-ом. */

/* ── Индикатор «онлайн» ─────────────────────────────────────────────────────
   Своих правил здесь нет намеренно. Точку рисует тема (assets/css/input.css):
   тот же зелёный #22c55e и та же анимация custroute-online-pulse, что у кнопки
   Online в шапке, плюс белый ободок — на фотографии без него зелёное по
   зелёному теряется. Любое переопределение здесь снова уводит её от шапки. */

/* ── Плашка Verified ────────────────────────────────────────────────────────
   Правый нижний угол фотографии, впритык к краю и без скруглений: угол здесь
   внутренний, скруглять нечего. Слева внизу стоит значок видео, слева вверху
   точка «онлайн», сверху по центру огонь, справа вверху «в избранное».
   Галочка добавлена псевдоэлементом, чтобы не тащить в разметку ещё один тег. */
.custroute-model-card-media .pack-verified-badge {
  align-items: center;
  animation: pack-verified-glow 2.4s ease-in-out infinite;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 55%, #4ade80 100%);
  border-radius: 0;
  bottom: 0;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 3px;
  letter-spacing: .02em;
  line-height: 1;
  padding: 4px 8px;
  position: absolute;
  right: 0;
  white-space: nowrap;
  z-index: 30;
}

.custroute-model-card-media .pack-verified-badge::before {
  content: "✓";
  font-size: 10px;
  font-weight: 700;
}

@keyframes pack-verified-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

/* ── Цена в карусели «Available now» ────────────────────────────────────────
   Карточка остаётся такой, какой её рисует тема. Меняется ровно одно: цена
   вместо серого курсива становится белой и жирной — на тёмном фоне блока этого
   достаточно, чтобы она читалась и не спорила с розовым именем. */
.custroute-available-carousel .pack-price {
  color: #fff;
  display: inline-block;
  font-size: 16px;
  margin-top: 6px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

/* Имя не должно менять цвет при наведении: тема вешает на ссылку
   group-hover:text-white, и имя на секунду становилось белым. */
.custroute-available-carousel .carousel-card a,
.custroute-available-carousel .carousel-card:hover a,
.custroute-available-carousel .carousel-card:hover a:hover {
  color: #FE4365 !important;
}

/* ── Значок «огонь» у анкет пака ────────────────────────────────────────────
   Пламя и искры целиком лежат в assets/images/fire.svg: анимация внутри файла
   работает и через <img>. Здесь только посадка на карточку и покачивание.
   Стоит под точкой «онлайн», в одну колонку с ней: точка заканчивается на 22-м
   пикселе от верха, оттуда и начинается рамка значка. */
.custroute-model-card-media .pack-fire-badge {
  animation: pack-fire-flicker 2.6s ease-in-out infinite;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
  height: 30px;
  left: 0;
  position: absolute;
  top: 22px;
  transform-origin: 50% 85%;
  width: 30px;
  z-index: 35;
}

@keyframes pack-fire-flicker {
  0%, 100% { transform: scale(1)    rotate(-2deg); }
  35%      { transform: scale(1.09) rotate(2deg); }
  65%      { transform: scale(1.03) rotate(-1deg); }
}

/* Анкета не в сети — точки нет, и огонь занимает её место, а не висит под
   пустым углом. Класс ставит шаблон карточки: css здесь смотрел бы на соседний
   элемент, которого в разметке может не быть вовсе. */
.custroute-model-card-media .pack-fire-badge--solo {
  top: 4px;
}