/*
 * Кнопка «Написать в Telegram» на двух главных страницах (build.php → transform_contacts).
 * Фирменный стиль Telegram — голубой градиент логотипа, форма «таблетка».
 *
 * !important на свойствах, которые перебивает вёрстка темы: кнопка стоит там, где
 * раньше была ссылка-email, а тема красит любые ссылки в этих блоках
 * (напр. `.modal-dialog .modal-content .modal-body .block-white a` — цвет, рамка,
 * размер шрифта). Поднимать специфичность до пяти классов хрупче, чем !important
 * на ограниченном наборе свойств одного своего компонента.
 */
a.tg-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  height: 58px;
  max-width: 100%;
  margin-top: 4px;
  padding: 0 30px 0 14px !important;
  border: 0 !important;
  border-radius: 999px;
  background-image: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%) !important;
  box-shadow: 0 10px 30px rgba(34, 158, 217, .35);
  color: #fff !important;
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
}

a.tg-btn:hover,
a.tg-btn:focus {
  color: #fff !important;
  box-shadow: inset 0 0 70px rgba(255, 255, 255, .12), 0 12px 34px rgba(34, 158, 217, .45);
  transform: translateY(-1px);
}

a.tg-btn:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px;
}

.tg-btn__icon {
  flex: none;
  width: 34px;
  height: 34px;
}

/* До 767px тема масштабирует вёрстку через rem (html ≈ 8px на 400px экрана). */
@media (max-width: 767px) {
  a.tg-btn {
    height: 6rem;
    min-height: 44px;              /* минимальная зона нажатия пальцем */
    margin-bottom: 1rem;
    padding: 0 2.3rem 0 1rem !important;
    gap: 1.1rem;
    font-size: 2.28rem !important;
  }

  .tg-btn__icon {
    width: 3.8rem;
    height: 3.8rem;
    min-width: 30px;
    min-height: 30px;
  }
}