.form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form__header {}

.form__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form__bottom {
  display: flex;
  flex-direction: column;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.form__title {
  margin: 0;
}

.form__description {
  margin: 20px 0 0 0 !important;
}

.floating-label {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}


/* Лейбл по умолчанию — скрыт высотой 0 */
.floating-label label {
  font-size: 14px;
  color: #666;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  margin-bottom: 0;
}

/* Лейбл разворачивается при фокусе или заполнении */
.floating-label.focused label,
.floating-label.filled label {
  max-height: 30px;
  /* достаточно для одной строки */
  opacity: 1;
  margin-bottom: 4px;
}

/* Поле ввода */
.cf7-input {
  /* position: relative; */
  width: 100%;
  font-size: 16px;
  border: 1px solid #E7E7E7;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  padding: 18px 30px 18px 20px;
}

/* Стилизуем файл-инпут как обычное текстовое поле */
.cf7-input[type="file"] {
  padding: 14px 20px;
  font-size: 16px;
  border: 1px solid #E7E7E7;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.2s;
}

/* Убираем стандартный стиль кнопки "Выбрать файл" в Chrome */
.cf7-input[type="file"]::-webkit-file-upload-button {
  visibility: hidden;
}

/* Добавляем кастомную кнопку */
.cf7-input[type="file"]::before {
  content: ' Прикрепить КП';
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M15.1666 13.2087C15.1666 14.6392 14.6654 15.851 13.6629 16.8441C12.6605 17.8371 11.4453 18.3337 10.017 18.3337C8.589 18.3337 7.3715 17.8371 6.36454 16.8441C5.35758 15.851 4.85413 14.6392 4.85413 13.2087V5.29199C4.85413 4.28503 5.21175 3.42915 5.92704 2.72428C6.64233 2.01942 7.49996 1.66699 8.49996 1.66699C9.49996 1.66699 10.3576 2.01942 11.0729 2.72428C11.7882 3.42915 12.1458 4.28503 12.1458 5.29199V12.792C12.1458 13.3753 11.9375 13.8753 11.5208 14.292C11.1041 14.7087 10.6007 14.917 10.0104 14.917C9.42008 14.917 8.91663 14.711 8.49996 14.2989C8.08329 13.8867 7.87496 13.3844 7.87496 12.792V5.08366H9.12496V12.792C9.12496 13.0281 9.21175 13.233 9.38538 13.4066C9.559 13.5802 9.77175 13.667 10.0237 13.667C10.2757 13.667 10.484 13.5802 10.6487 13.4066C10.8134 13.233 10.8958 13.0281 10.8958 12.792V5.29199C10.8958 4.62533 10.6632 4.06283 10.1979 3.60449C9.73258 3.14616 9.16517 2.91699 8.49558 2.91699C7.826 2.91699 7.26004 3.14658 6.79767 3.60574C6.33529 4.06491 6.10413 4.62699 6.10413 5.29199V13.2087C6.10413 14.292 6.48588 15.2087 7.24933 15.9587C8.01279 16.7087 8.93663 17.0837 10.0208 17.0837C11.103 17.0837 12.0229 16.7087 12.7804 15.9587C13.5379 15.2087 13.9166 14.292 13.9166 13.2087V5.08366H15.1666V13.2087Z" fill="%239D9C9D"/></svg>');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
  padding-left: 28px;
  color: #9D9C9D;
  font-size: 16px;
  margin-right: 12px;
  cursor: pointer;
  user-select: none;
}


.cf7-input:hover {
  border-color: #090809;
}

/* ===== Radio button ===== */
.custom-radio label {
  cursor: pointer;
}

.custom-radio input[type=radio] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.custom-radio .wpcf7-list-item-label {
  padding-left: 29px;
  color: #090809;
}

.custom-radio .wpcf7-list-item-label:hover::before {
  outline: 1px solid #F44E3F;
}

.custom-radio .wpcf7-list-item-label:focus::before {
  outline: 1px solid #F44E3F;
}

.custom-radio input[type=radio]+span:before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 20px;
  width: 20px;
  top: 0;
  left: 0;
  background-color: #E7E7E7;
  outline: 1px solid transparent;
  transition: all .3s ease-in-out
}

.custom-radio input[type=radio]+span:after {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 20px;
  width: 20px;
  top: 0;
  left: 0;
  border: 4px solid #E7E7E7;
}

.custom-radio input[type=radio]:checked+span:after {
  background: #F44E3F;
  /* visibility: visible; */
}


/* ==== чекбокс ===== */

.custom-checkbox, .custom-radio {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.wpcf7-list-item {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 180px;
  /* cursor: pointer; */
  margin: 0;
  user-select: none;
}

/* Скрываем реальный чекбокс */
.wpcf7-list-item input[type="checkbox"] {
  position: absolute;
  /* opacity: 0; */
  height: 0;
  width: 0;
  /* cursor: pointer; */
}




.wpcf7-form-control-wrap input[type=checkbox]+.wpcf7-list-item-label,
input.custom-checkbox+.wpcf7-list-item-label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  user-select: none;
  margin-left: 0;
  color: #090809;
}

.wpcf7-form-control-wrap input[type=checkbox]+.wpcf7-list-item-label::before,
input.custom-checkbox+.wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-color: #E7E7E7;
  outline: 1px solid transparent !important;
  transition: all .3s ease-in-out
}

.wpcf7-form-control-wrap input[type=checkbox]:checked+.wpcf7-list-item-label::after,
input.custom-checkbox:checked+.wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  transform: translateY(-50%) rotate(-45deg);
  width: 13px;
  height: 8px;
  border: solid #F44E3F;
  border-width: 0 0 4px 4px;
}

/*состояние checkbox*/
.wpcf7-form-control-wrap input[type=checkbox]+.wpcf7-list-item-label:hover::before,
input+.wpcf7-list-item-label:hover::before {
  outline: 1px solid #F44E3F !important;
}

.wpcf7-form-control-wrap input[type=checkbox]:focus+.wpcf7-list-item-label::before,
input:focus+.wpcf7-list-item-label::before {
  outline: 1px solid #F44E3F !important;
}


/* НЕактивный чекбокс: вместо белого — тёмный фон, бордер как был */
.wpcf7-form-control-wrap input[type=checkbox]:not(:checked)+.wpcf7-list-item-label::before,
input.custom-checkbox:not(:checked)+.wpcf7-list-item-label::before {
  background-color: #E7E7E7;
}

.custom-cf7-submit {
  cursor: pointer;
  color: #FFF;
  border-radius: 56px;
  background-color: #F44E3F;
  transition: all .3s ease-in-out;
  padding: 20px 28px;
}

.custom-cf7-submit:hover {
  background-color: #090809;
}

/* оставляем зелёный бордер при фокусе/визите */
input[type=date]:focus-visible,
input[type=date]:visited,
input[type=email]:focus-visible,
input[type=email]:visited,
input[type=number]:focus-visible,
input[type=number]:visited,
input[type=password]:focus-visible,
input[type=password]:visited,
input[type=search]:focus-visible,
input[type=search]:visited,
input[type=tel]:focus-visible,
input[type=tel]:visited,
input[type=text]:focus-visible,
input[type=text]:visited,
select:focus-visible,
select:visited,
textarea:focus-visible,
textarea:visited {
  border: 1px solid #090809 !important;
}

/* Добавляем иконку в нужные (обязательные) поля */
.required-icon .wpcf7-form-control-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='8' viewBox='0 0 7 8' fill='none'%3E%3Cpath d='M3.34089 7.27299L3.4318 4.77299L1.31816 6.1139L0.772705 5.15936L2.99998 4.00027L0.772705 2.84118L1.31816 1.88663L3.4318 3.22754L3.34089 0.727539H4.4318L4.34089 3.22754L6.45452 1.88663L6.99998 2.84118L4.77271 4.00027L6.99998 5.15936L6.45452 6.1139L4.34089 4.77299L4.4318 7.27299H3.34089Z' fill='%23F44E3F'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

@media (max-width: 576px) {
  .form__body {
    gap: 12px;
  }

  .form__grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }
}