/* --- ШРИФТ И ОСНОВНЫЕ СБРОСЫ --- */
@font-face {
  font-display: swap;
  font-family: "PP Formula";
  src: url("https://www.lsports.eu/themes/LSport/fonts/Formula-Medium.woff") format("woff"),
       url("https://www.lsports.eu/themes/LSport/fonts/Formula-Medium.ttf") format("truetype");
  font-weight: 400;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* --- КОНТЕЙНЕР ФОРМЫ --- */
form.hs-form {
  max-width: 380px;
  margin: 0 auto;
}

/* --- ОБЕРТКА ПОЛЯ --- */
.hs-form .hs-form-field {
  position: relative;
  margin: 20px 0 0 0;
}

/* --- ПОЛЕ ВВОДА E-MAIL --- */
.hs-form input[type="email"] {
  background-color: transparent !important;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
  border-radius: 50px !important;
  height: 45px !important;
  width: 100% !important;
  padding: 0 25px !important;
  font-family: 'PP Formula', sans-serif !important;
  font-size: 15px !important;
  text-align: center !important;
}

.hs-form input[type="email"]:focus {
  outline: none !important;
  border-color: #D9EF0C !important;
}

/* --- СТИЛИ ДЛЯ ЗАГОЛОВКА (LABEL) --- */
.hs-form label {
  position: absolute;
  top: 50%;
  left: 25px;
  right: 25px;
  transform: translateY(-50%);
  text-align: center;
  color: #FFFFFF;
  font-family: 'PP Formula', sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
  transition: all 0.2s ease-out;
}

 /* Лейбл по центру, готов к плавному исчезновению */
.hs-form label {
  position: absolute;
  top: 50%;
  left: 0; right: 0;            /* чтобы центрировать вместе с padding */
  padding: 0 25px;              /* совпадает с padding инпута */
  transform: translateY(-50%);
  text-align: center;
  color: #FFFFFF;
  font-family: 'PP Formula', sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity .2s ease; /* важное: анимируем только прозрачность */
}

/* 1) При фокусе — просто скрыть */
.hs-form .hs-form-field:not(.error):focus-within > label {
  opacity: 0;
  visibility: hidden;
  transform: none; /* на всякий */
}

/* 2) И скрытым оставлять, если поле уже заполнено/валидно */
.hs-form .hs-form-field:has(input:valid) > label,
.hs-form .hs-form-field:has(input:not(:placeholder-shown)) > label,
.hs-form .hs-form-field:has(input:-webkit-autofill) > label {
  opacity: 0;
  visibility: hidden;
  transform: none;
}

/* В ошибке — как и было, полностью убрать */
.hs-form .hs-form-field.error > label {
  display: none !important;
}


/* РЕШЕНИЕ: Заголовок ПОЛНОСТЬЮ ИСЧЕЗАЕТ В СОСТОЯНИИ ОШИБКИ, чтобы не мешать */
.hs-form .hs-form-field.error > label {
    display: none !important;
}

/* --- КНОПКА ОТПРАВКИ --- */
.hs-form .actions {
  padding: 0 !important;
  margin: 25px 0 0 0 !important;
}

.hs-form .hs-button {
  background-color: #D9EF0C !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 50px !important;
  height: 45px !important;
  width: 100% !important;
  font-family: 'PP Formula', sans-serif !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 50px !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* --- СООБЩЕНИЕ ОБ ОШИБКЕ --- */
/* По умолчанию контейнер с ошибками скрыт */
.hs-form .hs-error-msgs {
  display: none;
}

/* РЕШЕНИЕ: Показываем контейнер с ошибкой и стилизуем его ТОЛЬКО КОГДА ЕСТЬ КЛАСС .error */
.hs-form .hs-form-field.error .hs-error-msgs {
  display: block !important;
  position: static !important;
  margin-top: -22px !important;
  width: 100% !important;
  text-align: center !important;
}

/* Убираем маркеры-точки из списка ошибок */
.hs-form .hs-form-field.error .hs-error-msgs ul,
.hs-form .hs-form-field.error .hs-error-msgs li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hs-form .hs-error-msg {
  color: #FF4747 !important;
  font-family: sans-serif !important;
  font-size: 13px !important;
  text-transform: none !important;
}

/* БАЗА: контейнер ошибок скрыт */
.hs-form .hs-error-msgs { display: none; }

/* ПОКАЗЫВАТЬ ошибку, когда HubSpot пометил input/обёртку */
.hs-form .hs-form-field.error .hs-error-msgs,
.hs-form .hs-form-field:has(.hs-input.error) .hs-error-msgs,
.hs-form .hs-form-field:has(.hs-input.invalid) .hs-error-msgs {
  display: block !important;
  position: static !important;
  margin-top: -22px !important;
  width: 100% !important;
  text-align: center !important;
}

/* ЛЕЙБЛ: по фокусу просто гасим */
.hs-form .hs-form-field:not(.error):focus-within > label {
  opacity: 0;
  visibility: hidden;
  transform: none;
}

/* Если поле предзаполнено HubSpot-ом — тоже гасим */
.hs-form .hs-form-field.is-prefilled > label {
  opacity: 0;
  visibility: hidden;
  transform: none;
}

/* Когда показана ошибка (input с классами от HubSpot) — лейбл прячем,
   чтобы не перекрывал текст ошибки */
.hs-form .hs-form-field.error > label,
.hs-form .hs-form-field:has(.hs-input.error) > label,
.hs-form .hs-form-field:has(.hs-input.invalid) > label {
  display: none !important;
}
/* --- АДАПТИВ ДЛЯ ШРИФТА --- */
/* экран <1280px: font-size 14px */
@media (max-width: 1279px) {
  .hs-form input[type="email"],
  .hs-form label,
  .hs-form .hs-button,
  .hs-form .hs-error-msg /* если нужно */ {
    font-size: 14px !important;
  }
}

/* экран <748px: font-size 13px */
@media (max-width: 747px) {
  .hs-form input[type="email"],
  .hs-form label,
  .hs-form .hs-button,
  .hs-form .hs-error-msg {
    font-size: 13px !important;
  }
}