$extraHead .= "\n" . '<style>
.fav-btn{
  position:absolute; top:8px; right:8px;
  width:32px; height:32px; border:0; cursor:pointer;
  border-radius:12px;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
  z-index: 6;
  display:flex; align-items:center; justify-content:center;
}

/* ✅ Баланс-пилюля (и на мобилке, и на десктопе) */
.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(255, 215, 0, .65);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, .18) inset;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .08), rgba(255, 215, 0, .03));
  color: var(--text);
  letter-spacing: .2px;
  line-height: 1;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .15s ease;
}

.balance-pill:active {
  transform: scale(.96);
}

.balance-pill:hover {
  box-shadow: 0 0 0 1px rgba(255, 215, 0, .25) inset,
              0 4px 12px rgba(255, 215, 0, .12);
}

/* Десктоп: если где-то есть баланс в меню, можно тоже оформить */
@media (min-width: 901px) {
  .balance-pill {
    font-size: 12px;
    padding: 5px 12px;
  }
}

/* всегда сердечко */
.fav-btn::before{
  content:"♥";
  font-size:19px;
  line-height:1;
  color:#fff;
  transform: translateY(0.5px);
}

/* в избранном = красное (и никакой звезды) */
.fav-btn.is-fav::before{
  color:#ff4d6d;
}

.fav-btn:active{ transform: scale(.96); }

/* На совсем мелких экранах — ещё компактнее и ниже */
@media (max-width: 420px){
  .fav-btn{
    top:4px;
    right:4px;
    width:28px;
    height:28px;
    border-radius:9px;
  }
  .fav-btn::before{
    font-size:14px;
  }
}

/* ✅ Заголовок анкеты на карточке (особенно важно для мобилки) */
.listing-card-title{
  margin-top:8px;
  font-size:13px;
  line-height:1.25;
  opacity:.92;
  word-break: break-word;

  /* аккуратно обрезаем до 2 строк */
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
@media (max-width: 900px){
  /* если где-то в CSS скрывали — пробиваем */
  .listing-card-title{ display:-webkit-box !important; }
}
@media (max-width: 420px){
  .listing-card-title{ font-size:12.5px; }
}

/* 🚫 На мобилке скрываем район на карточке */
@media (max-width: 900px){
  .card-district{ display:none !important; }
}
/* 💛 Цена на мобилке: чуть больше + золотая рамка */
@media (max-width: 900px){
  .card-price{
    font-size:12px;
    font-weight:800;
    padding:4px 8px;
    border:1px solid rgba(255, 215, 0, .75);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, .18) inset;
    border-radius:999px;
    letter-spacing:.2px;
  }
}

/* 📝 На мобилке: если цены нет — вместо "—" показываем "Цена договорная" */
@media (max-width: 900px){
  .card-price.no-price{
    font-size:0; /* прячем "—" */
  }
  .card-price.no-price::before{
    content:"Цена договорная";
    font-size:12px; /* под твой текущий .card-price */
    font-weight:800;
    letter-spacing:.2px;
  }
}
/* 🖥️ ДЕСКТОП: цена — переносим "сом" на новую строку */
@media (min-width: 901px){
  .card-price{
    /* ✅ базовое */
    font-size:12px;
    font-weight:800;
    letter-spacing:.2px;

    /* ✅ рамка = по контенту, а не “кружок” */
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    /* ✅ главное против “сжатия” внутри flex-строки */
    flex:0 0 auto;
    flex-shrink:0;

    /* ✅ перебиваем возможные фикс размеры из .pill */
    width:auto !important;
    height:auto !important;
    min-width:max-content;     /* чтобы не ужималось меньше текста */
    min-height:0;
    box-sizing:border-box;

    /* ✅ воздух, чтобы текст точно был внутри */
    padding:6px 10px;

    border:1px solid rgba(255, 215, 0, .65);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, .12) inset;
    border-radius:999px;

    text-align:center;
    line-height:1.05;

    /* ✅ переносы разрешены, но контролируемые */
    white-space:normal;
    overflow-wrap:anywhere;
  }

  /* если у тебя есть разметка с price-num / price-unit */
  .card-price .price-num{
    display:block;
    white-space:nowrap; /* число не рвём */
    line-height:1.05;
  }
  .card-price .price-unit{
    display:block;
    font-size:11px;
    opacity:.92;
    margin-top:1px;
    line-height:1.05;
    white-space:nowrap; /* “сом” не рвём */
  }
}


/* 🖥️ ДЕСКТОП: если цены нет — переносим "договорная" на новую строку */
@media (min-width: 901px){
  .card-price.no-price{
    font-size:0;
  }
  .card-price.no-price::before{
    content:"Цена\Aдоговорная";
    white-space:pre-line;
    display:block;

    /* ✅ чтобы текст не вылезал и рамка росла */
    width:auto;
    max-width:100%;
    overflow-wrap:anywhere;

    font-size:12px;
    font-weight:800;
    letter-spacing:.2px;
    line-height:1.05;
    text-align:center;
  }
}

/* 📵 Мобилка: большая кнопка "Черный список номеров" */
@media (max-width: 900px){
  .blacklist-big-btn{
    display:block;
    width:100%;
    padding:12px 14px;
    font-size:15px;
    font-weight:900;
    border-radius:14px;
    text-align:center;
  }
}

.age-mobile{ display:none; }
@media (max-width: 900px){
  .age-desktop{ display:none; }
  .age-mobile{ display:inline; }
}
@media (min-width: 901px){
  .age-desktop{ display:inline; }
  .age-mobile{ display:none; }
}

/* =========================
   ✅ VIP: СИНЯЯ рамка карточки
   PREMIUM (prem-outline) не трогаем — остаётся золотой толстой
   ========================= */
.card.vip-outline{
  border: 2px solid rgba(56, 166, 222, .95) !important;         /* синий */
  box-shadow:
    0 0 0 1px rgba(56, 166, 222, .25) inset,
    0 10px 26px rgba(0,0,0,.18) !important;
}

/* чуть “неоновее” при наведении (по желанию, выглядит вкусно) */
@media (hover:hover){
  .card.vip-outline:hover{
    box-shadow:
      0 0 0 1px rgba(56, 166, 222, .35) inset,
      0 0 18px rgba(56, 166, 222, .18),
      0 12px 28px rgba(0,0,0,.22) !important;
  }
}

/* =========================
   ✅ VIP: СИНЯЯ рамка карточки (супер-оверрайд)
   PREMIUM (prem-outline) не трогаем
   ========================= */

/* максимально приоритетно */
.grid-catalog .card.vip-outline,
.grid .card.vip-outline,
.card.vip-outline{
  border: 3.7px solid rgba(56, 166, 222, .98) !important;
  border-color: rgba(56, 166, 222, .98) !important;
  outline: none !important;
  border-image: none !important;

  /* если "золото" рисовалось тенью — прибиваем и ставим своё */
  box-shadow:
    0 0 0 1px rgba(56, 166, 222, .22) inset,
    0 10px 26px rgba(0,0,0,.18) !important;
}

/* если рамка рисуется псевдоэлементом — тоже прибиваем */
.card.vip-outline::before,
.grid-catalog .card.vip-outline::before{
  content: none !important;
  display: none !important;
}

/* лёгкий эффект при наведении */
@media (hover:hover){
  .grid-catalog .card.vip-outline:hover,
  .card.vip-outline:hover{
    box-shadow:
      0 0 0 1px rgba(56, 166, 222, .35) inset,
      0 0 18px rgba(56, 166, 222, .16),
      0 12px 28px rgba(0,0,0,.22) !important;
  }
}

/* =========================
   ⭐ VIP STAR — синяя с бликом
   ========================= */

/* сама плашка VIP — чуть синевы */
.corner-badge.vip-badge{
  border-color: rgba(56,166,222,.55);
  box-shadow:
    0 0 0 1px rgba(56,166,222,.18) inset,
    0 6px 14px rgba(0,0,0,.28);
}

/* ⭐ звезда */
.corner-badge.vip-badge .star{
  color: #38a6de; /* основной синий */
  text-shadow:
    0 0 6px rgba(56,166,222,.65),
    0 0 12px rgba(56,166,222,.45),
    0 1px 2px rgba(0,0,0,.45);

  /* делаем “металлический” блик */
  background: linear-gradient(
    180deg,
    #e6f6ff 0%,
    #7cc8ff 35%,
    #2b8fd6 70%,
    #1e5f99 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  font-size: 14px;
  margin-right: 4px;
}

/* лёгкое дыхание при наведении на карточку */
@media (hover:hover){
  .card.vip-outline:hover .corner-badge.vip-badge .star{
    text-shadow:
      0 0 8px rgba(56,166,222,.75),
      0 0 18px rgba(56,166,222,.55),
      0 1px 2px rgba(0,0,0,.45);
  }
}
/* =========================
   VIP badge — синий фон + синяя звезда (без блика)
   ========================= */

.corner-badge.vip-badge{
  background: linear-gradient(180deg, rgba(56,166,222,.95), rgba(30,120,190,.95));
  border: 1px solid rgba(160,220,255,.55);
  color: #eaf7ff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 6px 14px rgba(0,0,0,.28);
}

/* ⭐ звезда — просто синяя, без блика */
.corner-badge.vip-badge .star{
  color: #bfe9ff;              /* светло-синий */
  -webkit-text-fill-color: initial; /* на всякий, чтобы снять прошлый градиент */
  background: none !important;       /* убираем “блик” */
  text-shadow:
    0 0 6px rgba(56,166,222,.55),
    0 1px 2px rgba(0,0,0,.45);
  font-size: 14px;
  margin-right: 4px;
}
/* =========================
   PREMIUM badge — пульс только на короне 👑
   ========================= */
.corner-badge.premium-badge .crown{
  display:inline-block;
  transform-origin: 50% 60%;
  animation: premCrownPulse 1.25s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes premCrownPulse{
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
  50%  { transform: scale(1.20); filter: drop-shadow(0 0 8px rgba(255,215,0,.55)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
}

/* уважение к настройке "уменьшить анимации" */
@media (prefers-reduced-motion: reduce){
  .corner-badge.premium-badge .crown{ animation: none !important; }
}

/* ✅ Toast "Добавлено в избранное" */
.fav-toast{
width: 280px;
  position: fixed;
  left: 50%;
  top: 42%;                 /* ✅ чуть выше центра */
  transform: translate(-50%, -50%) translateY(14px);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;

  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;

  transition: opacity .18s ease, transform .18s ease;
}
.fav-toast.show{
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

.fav-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .fav-toast{ transition: none !important; }
}

/* ✅ VIP: синяя рамка у кнопки "Показать номер" (и pill после раскрытия) */
.card.vip-outline .phone-btn,
.card.vip-outline .phone-pill{
  border: 2px solid rgba(56, 166, 222, .98) !important;
  box-shadow: 0 0 0 1px rgba(56, 166, 222, .20) inset !important;
}

/* Если у phone-btn/phone-pill есть свои классы vip — тоже подстрахуем */
.phone-btn.vip,
.phone-pill.vip{
  border: 2px solid rgba(56, 166, 222, .98) !important;
  box-shadow: 0 0 0 1px rgba(56, 166, 222, .20) inset !important;
}

/* =========================
   📞 Кнопка "Показать номер"
   PREMIUM — золотая рамка
   VIP — синяя рамка + белый текст
   ========================= */

/* PREMIUM: золото */
.phone-btn.premium,
.phone-pill.premium{
  border: 2px solid rgba(255, 215, 0, .75) !important;
  box-shadow: 0 0 0 1px rgba(255, 215, 0, .18) inset !important;
}

/* VIP: синий */
.phone-btn.vip,
.phone-pill.vip{
  border: 2px solid rgba(56, 166, 222, .98) !important;
  box-shadow: 0 0 0 1px rgba(56, 166, 222, .20) inset !important;
}

/* VIP: надпись "Показать номер" — белая */
.phone-btn.vip .phone-btn-text{
  color:#fff !important;
}

/* ✅ Толщина текста кнопок "Позвонить" / "Написать" */
.phone-btn .phone-btn-text{
  font-weight: 450 !important;
}

/* На всякий случай: чтобы текст не серел от общих стилей */
.phone-btn.vip,
.phone-btn.vip *{
  color:#fff !important;
}
/* =========================
   ✅ Фикс цветов номера после "Показать номер"
   PREMIUM — золотой текст
   VIP — синий текст
   ========================= */

/* убираем дефолтный "синий линк" у revealed номера */
a.phone-pill{
  color: inherit;
  text-decoration: none;

  /* ✅ анимация нажатия */
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
  will-change: transform;
}

/* PREMIUM: номер золотой */
a.phone-pill.premium,
a.phone-pill.premium .phone-pill-text{
  color: rgba(255, 215, 0, .95) !important;
}

/* VIP: номер синий */
a.phone-pill.vip,
a.phone-pill.vip .phone-pill-text{
  color: rgba(56, 166, 222, .98) !important;
}

/* STANDARD: на всякий — обычный белый/серый */
a.phone-pill.std,
a.phone-pill.std .phone-pill-text{
  color: #e5e7eb !important;
}

/* ✅ WhatsApp-кнопка "Показать номер" — без подчеркивания (это <a>) */
a.phone-btn{
  text-decoration: none !important;
  color: inherit !important;

  /* ✅ анимация нажатия */
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
  will-change: transform;
}
a.phone-btn:hover,
a.phone-btn:focus,
a.phone-btn:active{
  text-decoration: none !important;
  color: inherit !important;
}

/* ✅ Анимация нажатия для "Позвонить" / "Написать" / "Написать в TG" */
.phone-btn,
.phone-pill{
  transform: translateY(0) scale(1);
}

.phone-btn:active,
.phone-pill:active{
  transform: translateY(1px) scale(.96);
  opacity: .92;
}

@media (hover:hover){
  .phone-btn:hover,
  .phone-pill:hover{
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce){
  .phone-btn,
  .phone-pill,
  a.phone-btn,
  a.phone-pill{
    transition: none !important;
  }

  .phone-btn:active,
  .phone-pill:active,
  .phone-btn:hover,
  .phone-pill:hover{
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ✅ Телефонная трубка у обычной кнопки "Показать номер" — красная */
span.phone-btn .wa-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 999px;
  background: #ff3b30 !important; /* красный кружок */
}

span.phone-btn .wa-ico svg{
  width: 11px;
  height: 11px;
  display: block;
  fill: #ffffff !important; /* белая трубка */
  color: #ffffff !important;
}

span.phone-btn .wa-ico svg path{
  fill: #ffffff !important; /* белая трубка */
}


</style>';