/* ------------------------------------------------------------------
   Наши дополнения к оригинальным стилям k1fitness.kz (styles.css):
   зелёные кнопки «Оставить заявку» (в hero и плавающая), попап заявки.
   Всё, что отличается от оригинала, живёт в этом файле.
   ------------------------------------------------------------------ */

:root {
  --green: #1ea85a;
  --green-hover: #23c268;
  --green-glow: rgba(35, 194, 104, 0.55);
}

/* Базовая зелёная кнопка в стиле кнопок сайта
   (border-radius 2px, Open Sans 500, капс, как .spb / #submitButton) */
.btn-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 2px;
  padding: 16px 32px;
  font-family: var(--font-family_1);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white-color);
  background: var(--green);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-lead:hover,
.btn-lead:focus-visible {
  background: var(--green-hover);
  outline: none;
}

.btn-lead:active {
  transform: translateY(1px);
}

/* Абзац-ответ под H1 (AEO): факты, которые цитируют AI-движки */
.hero__lead {
  position: relative;
  z-index: 10;
  max-width: 820px;
  margin: -8px 32px 32px 0;
  font-family: var(--font-family_1);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Блок «Вопросы и ответы» */
.section--faq .faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
  margin-top: 40px;
}

.faq__item {
  padding: 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: var(--second-gray-bg-color);
}

.faq__q {
  margin: 0 0 10px;
  font-family: var(--font-family_2);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--white-color);
}

.faq__a {
  margin: 0;
  font-family: var(--font-family_1);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.updated {
  margin-top: 28px;
  font-family: var(--font-family_1);
  font-size: 14px;
  color: var(--gray-text-color);
}

@media screen and (max-width: 1024px) {
  .hero__lead { margin-right: 0; }
}

@media screen and (max-width: 768px) {
  .hero__lead { font-size: 16px; margin: 0 0 24px; }
  .section--faq .faq { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .faq__item { padding: 18px 18px; }
  .faq__q { font-size: 18px; }
  .faq__a { font-size: 15px; }
}

/* Кнопка на первом экране */
.hero__cta {
  position: relative;
  z-index: 10;
  margin-top: 32px;
  margin-right: 32px;
}

.btn-lead--hero {
  min-width: 320px;
  box-shadow: 0 10px 30px rgba(30, 168, 90, 0.35);
}

/* Плавающая кнопка */
.btn-lead--float {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 90; /* ниже шапки (100) и попапа заявки (100) */
  border-radius: 50px;
  padding: 14px 26px 14px 20px;
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 0 var(--green-glow);
  animation: lead-pulse 2.6s ease-out infinite;
}

.btn-lead--float .btn-lead__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.btn-lead--float .btn-lead__icon svg {
  width: 100%;
  height: 100%;
}

@keyframes lead-pulse {
  0%   { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 0 var(--green-glow); }
  70%  { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 18px rgba(35, 194, 104, 0); }
  100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(35, 194, 104, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-lead--float { animation: none; }
}

/* Пока открыт попап заявки или боковое меню - плавающую кнопку убираем */
body.lead-popup-open .btn-lead--float,
body.side-menu-open .btn-lead--float,
.btn-lead--float.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.btn-lead--float {
  transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
}

/* Попап заявки (переиспользуем .popup-buy оригинала).
   В оригинале попап лежал внутри блока тарифов (position:absolute) и страница
   прокручивалась к нему. У нас он открывается и с первого экрана, поэтому на
   десктопе делаем его фиксированным по центру окна, картинку ограничиваем по высоте,
   чтобы форма была видна целиком без прокрутки. Мобильная версия - как в оригинале. */
@media screen and (min-width: 769px) {
  .popup-buy,
  .popup-buy.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }

  .popup-buy .mobile-header {
    width: 580px;
    max-width: 100%;
    height: 0;
  }

  .popup-buy .mobile-header > div.close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 12px;
    cursor: pointer;
  }

  .popup-buy > div.container {
    position: relative;
    left: auto;
    transform: none;
    width: 580px;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 40px);
    overflow: auto;
  }

  .popup-buy > div.container > img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
  }
}

.popup-buy > div.container > div > p.popup-lead-text {
  margin-bottom: 16px;
}

.popup-buy .success-animation {
  text-align: center;
}

.popup-buy .success-animation .checkmark {
  margin: 0 auto 16px;
}

.popup-buy .success-text,
.form-message {
  font-family: var(--font-family_1);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
}

.form-message:empty { display: none; }
.form-message { margin-top: 12px; }
/* сообщение под основной формой: блок светлый, белый текст оригинала не читается */
.section-6 .form-message { color: #1c2125; font-weight: 500; }
.section-6 .form-message.text-success { color: #1a8f47; }
.section-6 .form-message.text-danger { color: #c8102e; }
.popup-buy .form-message { margin: -8px 0 16px; font-size: 14px; }
.popup-buy .form-message.text-danger { color: #ff6b6b; }

.popup-buy form.is-sent { display: none; }

/* Состояние отправки */
.js-lead-form.is-sending button[type="submit"],
.js-lead-form.is-sending input[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Поле-ловушка для ботов (honeypot), добавляется скриптом */
.js-lead-form .hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Карта: запасной вариант (Google Maps embed), когда нет ключа Яндекс Карт */
#map.map--fallback iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  display: block;
  filter: saturate(0.85);
}


/* ------------------------------------------------------------------ mobile */
@media screen and (max-width: 1024px) {
  .hero__cta { margin-right: 0; }
}

@media screen and (max-width: 768px) {
  .hero__cta { margin-top: 24px; }
  .btn-lead--hero { width: 100%; min-width: 0; }

  .btn-lead--float {
    right: 16px;
    left: 16px;
    bottom: 16px;
    justify-content: center;
    padding: 16px 20px;
    border-radius: 4px;
  }

  /* чтобы плавающая кнопка не закрывала нижнюю строку футера */
  footer .bottom-bar { padding-bottom: 72px; }

}

@media screen and (max-width: 500px) {
  .hero__cta { margin-top: 20px; }
  .btn-lead--hero { padding: 15px 20px; font-size: 15px; }
}