/* Krepko — Sticky mobile bottom CTA (always-visible WhatsApp / Telegram)
   Подключается через <link rel="stylesheet" href="/assets/sticky-cta.css">.
   В каждую страницу с CTA вставляется <div class="sticky-cta">...</div> перед </body>.
   Видна ТОЛЬКО на mobile/tablet (≤768px) — на desktop отключается. */

.sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
    background: rgba(23, 28, 40, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid #2D3650;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.4);
  }
  .sticky-cta__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: none;
    transition: transform 0.12s;
  }
  .sticky-cta__btn:hover, .sticky-cta__btn:active {
    transform: translateY(-1px);
  }
  /* В стиле Krepko top-nav иконок — tinted background + colored border + glow */
  .sticky-cta__btn--wa {
    background: rgba(37, 211, 102, 0.14);
    border: 1px solid rgba(37, 211, 102, 0.32);
    color: #4ED88A;
    box-shadow: 0 0 12px rgba(78, 216, 138, 0.18);
  }
  .sticky-cta__btn--wa:hover, .sticky-cta__btn--wa:active {
    background: rgba(37, 211, 102, 0.22);
    box-shadow: 0 0 14px rgba(78, 216, 138, 0.32);
  }
  .sticky-cta__btn--tg {
    background: rgba(34, 158, 217, 0.14);
    border: 1px solid rgba(34, 158, 217, 0.32);
    color: #5CB8E5;
    box-shadow: 0 0 12px rgba(34, 158, 217, 0.18);
  }
  .sticky-cta__btn--tg:hover, .sticky-cta__btn--tg:active {
    background: rgba(34, 158, 217, 0.22);
    box-shadow: 0 0 14px rgba(34, 158, 217, 0.32);
  }
  .sticky-cta__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  /* Нужен отступ внизу страницы чтобы content не залезал под sticky CTA.
     Применяем к .site-footer (последний элемент перед sticky) — это надёжнее,
     чем переопределять body padding (часто конфликтует с inline-стилями страницы). */
  .site-footer {
    margin-bottom: 72px;
  }

  /* Sticky CTA уже выполняет роль «Связаться» на mobile — поэтому
     скрываем дублирующие body CTA-блоки. На desktop (>768px) sticky CTA
     отключен, и эти блоки видны как основной способ связаться. */
  .cta-block,
  .final-cta,
  .big-cta-block {
    display: none !important;
  }
}

/* Анимация при первом появлении */
@keyframes sticky-cta-slide-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (max-width: 768px) {
  .sticky-cta {
    animation: sticky-cta-slide-in 0.4s ease-out 0.6s both;
  }
}