.contact-form {
  width: 100%;
}
.contact-form__card {
  max-width: 998px;
  margin: -50px auto 50px;
  padding: 32px;
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.contact-form__note {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-neutral);
  margin-bottom: 24px;
}
.contact-form__body {
  width: 100%;
}
.contact-form .form-item {
  margin-bottom: 16px;
}
.contact-form .form-item__label,
.contact-form label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-neutral);
  margin-bottom: 8px;
}
.contact-form .form-item__label .form-required::after, .contact-form .form-item__label.form-required::after,
.contact-form label .form-required::after,
.contact-form label.form-required::after {
  content: " *";
  color: var(--color-error);
  font-size: var(--font-size-sm);
}
.contact-form input.form-text,
.contact-form input.form-email,
.contact-form input.form-tel,
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form select.form-select {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: var(--main-color-base-100, #fff);
  border: var(--border-width, 1px) solid var(--main-color-neutral-neutral, #1c2024);
  border-radius: var(--radius-join-fieds-top-left, 4px) var(--radius-join-fieds-top-right, 4px) var(--radius-join-fieds-bot-right, 4px) var(--radius-join-fieds-bot-left, 4px);
  font-size: var(--font-size-base);
  font-family: var(--primary-font);
  color: var(--color-neutral);
  transition: border-color 0.15s ease;
  box-sizing: border-box;
  appearance: auto;
}
.contact-form input.form-text:focus,
.contact-form input.form-email:focus,
.contact-form input.form-tel:focus,
.contact-form input[type=text]:focus,
.contact-form input[type=email]:focus,
.contact-form input[type=tel]:focus,
.contact-form select.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(21, 87, 181, 0.15);
}
.contact-form input.form-text::placeholder,
.contact-form input.form-email::placeholder,
.contact-form input.form-tel::placeholder,
.contact-form input[type=text]::placeholder,
.contact-form input[type=email]::placeholder,
.contact-form input[type=tel]::placeholder,
.contact-form select.form-select::placeholder {
  color: #767676;
}
.contact-form textarea.form-textarea {
  width: 100%;
  min-height: 93px;
  padding: 16px;
  background: var(--main-color-base-100, #fff);
  border: var(--border-width, 1px) solid var(--main-color-neutral-neutral, #1c2024);
  border-radius: var(--radius-join-fieds-top-left, 4px) var(--radius-join-fieds-top-right, 4px) var(--radius-join-fieds-bot-right, 4px) var(--radius-join-fieds-bot-left, 4px);
  font-size: var(--font-size-base);
  font-family: var(--primary-font);
  color: var(--color-neutral);
  resize: vertical;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.contact-form textarea.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(21, 87, 181, 0.15);
}
.contact-form .webform-flexbox {
  display: flex;
  gap: 16px;
}
.contact-form .webform-flexbox .form-item-phone-prefix {
  max-width: 200px;
  flex: 0 0 auto;
}
.contact-form .webform-flexbox .webform-flex:first-child {
  flex: 0 0 auto;
}
.contact-form .webform-flexbox .webform-flex:last-child {
  flex: 1;
}
.contact-form .form-item__description,
.contact-form .description {
  font-size: var(--font-size-base);
  color: #6b7280;
  margin-top: 4px;
}
.contact-form .form-item-email .form-item__label,
.contact-form .form-item-email label,
.contact-form .form-item-phone-prefix .form-item__label,
.contact-form .form-item-phone-prefix label,
.contact-form .form-item-phone .form-item__label,
.contact-form .form-item-phone label {
  display: inline;
  margin-bottom: 0;
}
.contact-form .form-item-email .form-item__description,
.contact-form .form-item-email .description,
.contact-form .form-item-email .webform-element-description,
.contact-form .form-item-phone-prefix .form-item__description,
.contact-form .form-item-phone-prefix .description,
.contact-form .form-item-phone-prefix .webform-element-description,
.contact-form .form-item-phone .form-item__description,
.contact-form .form-item-phone .description,
.contact-form .form-item-phone .webform-element-description {
  display: inline;
  margin: 0 0 0 6px;
  font-size: var(--font-size-base);
  color: #6b7280;
}
.contact-form .form-item-email input.form-email,
.contact-form .form-item-email input.form-tel,
.contact-form .form-item-email select.form-select,
.contact-form .form-item-phone-prefix input.form-email,
.contact-form .form-item-phone-prefix input.form-tel,
.contact-form .form-item-phone-prefix select.form-select,
.contact-form .form-item-phone input.form-email,
.contact-form .form-item-phone input.form-tel,
.contact-form .form-item-phone select.form-select {
  display: block;
  margin-top: 8px;
}
.contact-form .text-count-wrapper {
  font-size: var(--font-size-sm);
  color: #6b7280;
  text-align: right;
  margin-top: 4px;
  display: block;
}
.contact-form .text-count-wrapper.webform-counter-warning {
  color: var(--color-error);
  font-weight: var(--font-weight-semibold);
}
.contact-form .contact-form-counter {
  display: none;
}
.contact-form .form-type--checkbox,
.contact-form .js-webform-type-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-form .form-type--checkbox input[type=checkbox],
.contact-form .js-webform-type-checkbox input[type=checkbox] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.contact-form .form-type--checkbox label,
.contact-form .js-webform-type-checkbox label {
  margin-bottom: 0;
}
.contact-form .webform-button--submit,
.contact-form input[type=submit],
.contact-form button[type=submit] {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  background-color: #081462;
  color: #fff;
  border: none;
  border-radius: var(--radius-field);
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  font-family: var(--primary-font);
  cursor: pointer;
  transition: background-color 0.15s ease;
  margin-top: 24px;
}
.contact-form .webform-button--submit:hover,
.contact-form input[type=submit]:hover,
.contact-form button[type=submit]:hover {
  background-color: #0d1f99;
}
.contact-form .webform-button--submit:focus,
.contact-form input[type=submit]:focus,
.contact-form button[type=submit]:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .contact-form__card {
    padding: 24px 16px;
  }
  .contact-form .webform-flexbox {
    flex-direction: column;
  }
  .contact-form .webform-flexbox .webform-flex {
    flex: unset;
    width: 100%;
  }
}