@charset "UTF-8";
.nf-form-cont h3 {
  margin-top: 0;
  font-family: var(--heading-font-family);
  font-size: var(--heading-lg-font-size);
  font-weight: var(--heading-font-weight);
}
.nf-form-cont .nf-field-label .nf-label-span {
  font-weight: var(--body-default-font-weight);
}
.nf-form-cont .nf-field-label label {
  font-weight: var(--body-default-font-weight);
}
.nf-form-cont .nf-field-element input[type=checkbox],
.nf-form-cont .nf-field-element input[type=radio] {
  width: var(--input-check-size);
  height: var(--input-check-size);
  margin-inline-end: var(--input-check-gap);
}
.nf-form-cont .listcheckbox-container li,
.nf-form-cont .listradio-container li {
  display: flex;
  align-items: center;
}
.nf-form-cont .listcheckbox-container li + li,
.nf-form-cont .listradio-container li + li {
  margin-top: var(--inner-spacing-xs);
}
.nf-form-cont .nf-error .ninja-forms-field {
  border-color: var(--input-border-color-error);
}
.nf-form-cont .nf-error-msg,
.nf-form-cont .ninja-forms-req-symbol {
  color: var(--input-message-color-error);
}
.nf-form-cont .nf-response-msg {
  color: var(--input-message-color-success);
}

.fw-form-dummy {
  display: flex;
  flex-direction: column;
  border: 1px dotted var(--color-highlight);
  gap: var(--inner-spacing-md);
  padding: var(--inner-spacing-md);
}
.fw-form-dummy .fw-headline {
  width: 100%;
  margin-bottom: 0;
}
.fw-form-dummy .fw-form-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--inner-spacing-xs);
}
.fw-form-dummy .fw-form-item input[type=text],
.fw-form-dummy .fw-form-item textarea {
  line-height: 1;
  width: 100%;
  max-width: 100%;
  font-family: var(--input-font-family);
  font-weight: var(--input-font-weight);
  padding: 1em;
  outline: none;
  border: 1px solid var(--input-border-color);
  background-color: var(--input-background-color);
  color: var(--input-text-color);
  border-radius: var(--input-border-radius);
}
.fw-form-dummy .fw-form-item label {
  font-weight: var(--heading-font-weight);
}
.fw-frameworker-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--input-max-width);
}
.fw-frameworker-input-group > :is(input[type=text],
input[type=email],
input[type=search],
input[type=url],
input[type=tel],
input[type=number],
select) {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
.fw-frameworker-input-group > * + * {
  margin-left: calc(var(--input-border-thickness) * -1);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.fw-frameworker-input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.fw-frameworker-input-group > :focus {
  position: relative;
  z-index: 1;
}

/* Governed inline notice — success / warning / error via one state property.
   Markup guidance: role="status" (success/info) or role="alert" (error), and
   never color alone — the border + text carry the state for non-color vision. */
.fw-frameworker-notice {
  --notice-state-color: var(--notice-success-color);
  display: flex;
  align-items: flex-start;
  gap: var(--inner-spacing-xs);
  width: 100%;
  padding: var(--notice-padding-vertical) var(--notice-padding-horizontal);
  border: var(--notice-border-thickness) solid var(--notice-state-color);
  border-radius: var(--notice-border-radius);
  background-color: color-mix(in srgb, var(--notice-state-color) 10%, var(--color-white));
  color: var(--notice-text-color);
  font-size: var(--body-default-font-size);
}

.fw-frameworker-notice-success {
  --notice-state-color: var(--notice-success-color);
}

.fw-frameworker-notice-warning {
  --notice-state-color: var(--notice-warning-color);
}

.fw-frameworker-notice-error {
  --notice-state-color: var(--notice-error-color);
}

.fw-floating-field {
  position: relative;
}
.fw-floating-field label {
  position: absolute;
  top: 50%;
  left: var(--input-padding-horizontal);
  transform: translateY(-50%);
  color: var(--input-placeholder-color);
  opacity: var(--input-placeholder-opacity);
  pointer-events: none;
  transition: all var(--transition-timing-fast) var(--transition-ease-1);
}
.fw-floating-field input:focus + label,
.fw-floating-field input:not(:placeholder-shown) + label {
  top: 0;
  font-size: var(--caption-font-size);
  opacity: 1;
  background-color: var(--input-background-color);
  padding: 0 calc(var(--input-padding-horizontal) / 2);
}