/* ===== TG ADS — CAPSULE (clean, premium) — FINAL (no !important, no duplicates) ===== */

.sv-header-has-tg{
  position: relative;
  overflow: hidden;
}

.sv-tg-float{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 200px), -35%);
  z-index: 60;
  pointer-events: none;
}

/* ===== CAPSULE WRAP ===== */
.sv-tg-style--capsule .sv-tg-rail{
  pointer-events: auto;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;

  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 27px;


  width: max-content;
  white-space: nowrap;
  overflow: hidden;
}

.sv-tg-style--capsule .sv-tg-rail,
.sv-tg-style--capsule .sv-tg-rail *{
  box-sizing: border-box;
}

/* ===== LEFT PILL ===== */
.sv-tg-style--capsule .sv-tg-pill{
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 8px 12px;
  border-radius: 8px;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);

  text-decoration: none;
  user-select: none;
}

.sv-tg-style--capsule .sv-tg-pill__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;

  color: rgba(42,171,238,.98);
  line-height: 1;
}

.sv-tg-style--capsule .sv-tg-pill__icon i{
  font-size: 18px;
  line-height: 1;
  display: block;
}

.sv-tg-style--capsule .sv-tg-pill__text{
  display: flex;
  gap: 4px;
  align-items: center;

  font-family: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
}

.sv-tg-style--capsule .sv-tg-pill__muted{
  color: rgba(235,245,255,.78);
  font-weight: 500;
}

.sv-tg-style--capsule .sv-tg-pill__brand{
  color: rgba(42,171,238,.95);
  font-weight: 400;
}

/* ===== CIRCLES ROW (если используешь отдельную обертку) ===== */
.sv-tg-style--capsule .sv-tg-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== CIRCLES ===== */
/* Увеличила размер: было 44px -> стало 48px */
.sv-tg-style--capsule .sv-tg-slot{
  --size: 52px;

  width: var(--size);
  height: var(--size);
  flex: 0 0 var(--size);

  position: relative;
  display: block;
  border-radius: 999px;
  text-decoration: none;

  overflow: hidden;

border: 2.5px solid #1B4E85;
/*  убираем фон отсюда */
  background: transparent;

  /* ровный “премиум” без перебора */
 

  line-height: 0;
  font-size: 0;
}

/* лого всегда одинаково центрируется */
.sv-tg-style--capsule .sv-tg-logo{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
  border-radius: 999px;

  object-fit: cover;
  object-position: 50% 50%;
  box-shadow: none;
  image-rendering: auto;
}

/* если какое-то лого “мелкое” из-за прозрачных полей — добавь .is-contain на .sv-tg-slot */
.sv-tg-style--capsule .sv-tg-slot.is-contain .sv-tg-logo{
  object-fit: contain;
}

/* empty */
.sv-tg-style--capsule .sv-tg-empty{
  position: absolute;
  inset: 0;
  border-radius: 999px;

  /* темный градиент внутрянки */
  background: radial-gradient(circle at 30% 25%,
    rgba(255,255,255,.10),
    rgba(10,16,24,.65) 55%,
    rgba(0,0,0,.85) 100%
  );
}

.sv-tg-style--capsule .sv-tg-plus{
  position: absolute;
  inset: 0;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(160, 255, 130, .98);
text-shadow: 0 0 10px rgba(160, 255, 130, .25);



  font-size: 18px;
  font-weight: 600;
  line-height: 1;

  background: radial-gradient(circle at 35% 30%,
    rgba(255,255,255,.08),
    rgba(0,0,0,.42) 70%
  );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 8px 18px rgba(0,0,0,.38);
	

}


/* ===== FIX: HOVER GLOW (works even if rail has overflow:hidden) ===== */

.sv-tg-style--capsule .sv-tg-slot{
  position: relative;
  transform: translateZ(0); /* стабильный рендер */
}

/* убираем твою старую ::before подсветку полностью */
.sv-tg-style--capsule .sv-tg-slot::before{
  content: none;
}

/* подсветка через ring-shadows — не режется overflow'ом */
.sv-tg-style--capsule .sv-tg-slot:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);

  /* мягкая подсветка “сзади” */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 18px rgba(126,156,184,.35),
    0 0 40px rgba(126,156,184,.18);
}

/* чуть сильнее для + (если хочешь, можно убрать) */
.sv-tg-style--capsule .sv-tg-slot--add:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 18px rgba(160,255,130,.30),
    0 0 42px rgba(160,255,130,.16);
}

/* ===== Mac 13" 1440x900 — FINAL layout for: button + TG rail + right banner ===== */
@media (max-width: 1440px) and (max-height: 900px){

  /* 0) Сдвигаем весь плавающий блок вправо и чуть вверх аккуратно */
  .sv-tg-float{
    transform: translate(calc(-50% - 90px), -35%); /* было -200px -> делаем правее */
  }

  /* 1) Rail: больше НЕ max-content, а нормальный flex с сжатием */
  .sv-tg-style--capsule .sv-tg-rail{
    width: auto;                 /* ВАЖНО: убираем max-content */
    max-width: 680px;            /* rail остаётся “чуть больше”, но контролируем */
    min-width: 0;                /* позволяет реально сжиматься */
    gap: 16px;                   /* норм дистанция */
    padding: 8px 10px;
    margin-bottom: 22px; 	/* чуть меньше, чтобы не распирало */
	margin-right: 105px;
  }

  /* 2) Кружки: НЕ трогаем img вообще. Твой .sv-tg-logo уже идеален (absolute + object-fit).
        Меняем только --size, чтобы всё влезало и не налезало */
  .sv-tg-style--capsule .sv-tg-slot{
    --size: 46px;                /* было 52 -> компактнее, но не “мелко” */
    border-width: 2px;           /* чуть легче */
  }

  /* 3) Левая плашка “Вступай”: тоже чуть компактнее */
  .sv-tg-style--capsule .sv-tg-pill{
    padding: 7px 10px;
    gap: 6px;
  }
  .sv-tg-style--capsule .sv-tg-pill__text{
    font-size: 13px;
  }
}