.form {
  width: 100%;
}

.form-header {
  margin-bottom: var(--form-header-margin-bottom, 48px);
  font-size: var(--form-header-font-size, 28px);
  line-height: var(--form-header-line-height, 36px);
  font-weight: var(--form-header-font-weight, var(--font-weight-semi-bold));
  color: var(--form-header-color, var(--color-gray-950));
  text-align: center;
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--form-field-margin-bottom, 24px);
}

.form-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--form-footer-font-size, var(--font-size-base));
  line-height: var(--form-footer-line-height, var(--line-height-base));
  gap: var(--form-footer-gap, 12px);
  margin-top: var(--form-footer-margin-top, 16px);
  color: var(--form-footer-text-color, var(--color-gray-600));
}

.form-footer a {
  color: var(--form-footer-link-color, var(--color-gray-600));
  text-decoration: underline;
  font-weight: var(--font-weight-medium);
  transition: color 80ms ease-out;
}

.form-footer a:hover {
  color: var(--form-footer-link-hover-color, var(--color-gray-950));
}

.form-footer--horizontal {
  flex-direction: row;
  align-items: center;
  gap: var(--form-footer-horizontal-gap, 16px);
}

.form-footer__separator {
  color: var(--form-footer-separator-color, var(--color-gray-400));
  font-weight: var(--font-weight-regular);
}


.form-field__label {
  font-size: var(--form-field-label-font-size, var(--font-size-sm));
  line-height: var(--form-field-label-line-height, var(--line-height-sm));
  margin-bottom: var(--form-field-label-margin-bottom, 6px);
  font-weight: var(--form-field-label-font-weight, var(--font-weight-medium));
  color: var(--form-field-label-color, var(--color-gray-700));
}

/* Fields */
.form-field__input {
  outline: none;
  width: 100%;
  padding: var(--form-field-input-padding, 8px 12px);
  border: 1px solid var(--form-field-input-border-color, var(--color-gray-300));
  border-radius: var(--form-field-input-border-radius, 7px);
  font-size: var(--form-field-input-font-size, var(--font-size-base));
  line-height: var(--form-field-input-line-height, var(--line-height-base));
  background: var(--form-field-input-background, var(--color-white));
  color: var(--form-field-input-color, var(--color-gray-950));
  transition: border-color 120ms ease-out;
}

.form-field__input::placeholder {
  color: var(--form-field-input-placeholder-color, var(--color-gray-400));
}

.form-field__input:focus {
  border-color: var(--form-field-input-focus-border-color, var(--color-gray-900));
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-fields {
  margin-bottom: 32px;
}

.form-field:last-child {
  margin-bottom: 0;
}


.form-errors {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.1);
  border-radius: 6px;
}

.form-error {
  color: #d73a49;
  font-size: 13px;
  line-height: 18px;
}