@charset "UTF-8";
:root {
  /* onyx */
  --znf-v-multiplier: 3;
  --znf-h-multiplier: 4;
  --znf-spacing: 0.25rem;
  /* 🔲 Input styles */
  --znf-input-border-width: 1px;
  --znf-input-border-style: solid;
  --znf-input-border-color: var(--znf-secondary);
  --znf-input-border-radius: 2;
  --znf-input-font-size: 0.875rem;
  --znf-input-line-height: 1.5;
  --znf-input-color: var(--znf-accent1);
  --znf-input-placeholder-color: color-mix(in srgb, var(--znf-accent3) 80%, white 50%);
  --znf-input-background-color: var(--znf-base);
  --znf-input-focus-outline-color: var(--znf-primary);
  /* 🏷️ Label styles */
  --znf-label-font-weight: 600;
  --znf-label-color: var(--znf-accent3);
  /* 🎨 Icon styles */
  --znf-icon-size: 5;
  --znf-icon-color: var(--znf-accent2);
  --znf-gap-size: 5;
  --znf-h-gap-size: 3;
  /* 🔘 Button styles */
  --znf-button-width: auto;
  --znf-button-font-size: 0.875rem;
  --znf-button-font-weight: 500;
  --znf-button-color: #ffffff;
  --znf-button-background-color: var(--znf-primary);
  /* Darken the primary color for hover/focus using color-mix */
  --znf-button-hover-background-color: color-mix(in srgb, var(--znf-primary) 85%, black 15%);
  --znf-button-focus-background-color: color-mix(in srgb, var(--znf-primary) 85%, black 15%);
  --znf-button-disabled-background-color: color-mix(in srgb, var(--znf-secondary) 80%, white 20%);
  --znf-button-ghost-color: var(--znf-accent3);
  --znf-button-ghost-hover-color: var(--znf-primary);
  /* ❗ Error styles */
  --znf-error-color: #f87171;
  --znf-error-background-color: #fff1f2;
}

.znf-form {
  border: none;
  display: block;
  max-width: var(--znf-max-width);
  margin: var(--znf-form-align);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.znf-form .spinner {
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  display: inline-block;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}
.znf-form label {
  color: var(--znf-label-color, var(--znf-accent3));
}
.znf-form select.znf-control,
.znf-form input[type].znf-control,
.znf-form textarea.znf-control,
.znf-form :after,
.znf-form :before,
.znf-form ::backdrop {
  max-width: initial;
  box-sizing: border-box;
  border: 0 solid;
  border-radius: inherit;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  background: none;
  font-family: inherit;
}
.znf-form textarea {
  resize: vertical;
}
.znf-form .znf-input-counter {
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  padding-inline-end: calc(var(--znf-spacing) * var(--znf-h-multiplier) * 2);
  padding-block-end: calc(var(--znf-spacing) * var(--znf-v-multiplier));
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(128, 128, 128, 0.7333333333);
}
.znf-form button.znf-button {
  display: flex;
  cursor: pointer;
  margin: 0;
  padding: 0;
  padding-block: calc(var(--znf-spacing) * var(--znf-v-multiplier));
  padding-inline: calc(var(--znf-spacing) * var(--znf-h-multiplier));
  box-shadow: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-size: var(--znf-button-font-size, var(--znf-input-font-size));
  font-weight: var(--znf-button-font-weight);
  border-radius: calc(var(--znf-spacing) * var(--znf-input-border-radius));
  border-color: transparent;
  border-style: solid;
  border-width: var(--znf-input-border-width);
  background-color: var(--znf-button-background-color, var(--znf-primary));
  color: var(--znf-button-color);
  line-height: var(--znf-input-line-height);
  justify-content: center;
  align-items: center;
  height: initial;
  width: var(--znf-button-width);
}
.znf-form button.znf-button.--button-ghost {
  background-color: transparent;
  border-color: transparent;
  border-style: solid;
  border-width: var(--znf-input-border-width);
  color: var(--znf-button-ghost-color, var(--znf-accent3));
}
.znf-form button.znf-button.--button-ghost:hover {
  background-color: transparent;
  border-color: transparent;
  border-style: solid;
  border-width: var(--znf-input-border-width);
  color: var(--znf-button-ghost-hover-color);
}
.znf-form button.znf-button.--button-ghost:focus {
  background-color: transparent;
  border-color: transparent;
  border-style: solid;
  border-width: var(--znf-input-border-width);
  color: var(--znf-button-ghost-focus-color);
}
.znf-form button.znf-button:hover {
  background-color: var(--znf-button-hover-background-color, color-mix(in srgb, var(--znf-primary) 85%, black 15%));
}
.znf-form button.znf-button:focus {
  outline: none;
  background-color: var(--znf-button-focus-background-color, color-mix(in srgb, var(--znf-primary) 85%, black 15%));
}
.znf-form button.znf-button:disabled {
  opacity: 0.5;
  pointer-events: none;
  background-color: var(--znf-button-disabled-background-color, color-mix(in srgb, var(--znf-secondary) 80%, white 20%));
}
.znf-form .znf-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
}
.znf-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 4.06066C8.15829 3.8654 7.84171 3.8654 7.64645 4.06066L5.35355 6.35355C5.15829 6.54882 4.84171 6.54882 4.64645 6.35355C4.45118 6.15829 4.45118 5.84171 4.64645 5.64645L6.93934 3.35356C7.52513 2.76777 8.47487 2.76777 9.06066 3.35355L11.3536 5.64645C11.5488 5.84171 11.5488 6.15829 11.3536 6.35355C11.1583 6.54882 10.8417 6.54882 10.6464 6.35355L8.35355 4.06066Z' fill='%236b7280'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 11.9393C8.15829 12.1346 7.84171 12.1346 7.64645 11.9393L5.35355 9.64645C5.15829 9.45119 4.84171 9.45119 4.64645 9.64645C4.45118 9.84171 4.45118 10.1583 4.64645 10.3536L6.93934 12.6464C7.52513 13.2322 8.47487 13.2322 9.06066 12.6464L11.3536 10.3536C11.5488 10.1583 11.5488 9.84171 11.3536 9.64645C11.1583 9.45119 10.8417 9.45119 10.6464 9.64645L8.35355 11.9393Z' fill='%236b7280'/%3E%3C/svg%3E%0A");
  print-color-adjust: exact;
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}
.znf-form input[type=checkbox] {
  all: unset;
  appearance: none;
  print-color-adjust: exact;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: oklch(54.6% 0.245 262.881deg);
  border-color: oklch(53% 0.22 260.26deg);
  background-color: #fff;
  background-origin: border-box;
  border-width: 1px;
  flex-shrink: 0;
  display: inline-block;
}
.znf-form input[type=checkbox]:checked {
  background-color: currentColor;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: rgba(0, 0, 0, 0);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.znf-form input[type=checkbox]:checked::before {
  display: none;
}
.znf-form input[type=checkbox].znf-checkbox {
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  color: var(--znf-primary, #2563eb);
  accent-color: var(--znf-primary, #2563eb);
  height: 1.25rem;
  width: 1.25rem;
}
.znf-form input[type=checkbox].znf-checkbox:focus {
  outline: none;
}
.znf-form input[type=checkbox].znf-checkbox:checked {
  border-color: var(--znf-primary, #2563eb);
}
.znf-form input[type=checkbox].znf-checkbox:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.znf-form .znf-checkbox-label {
  font-size: 0.875rem;
  color: #6b7280;
  margin-inline-start: 0.75rem;
}

.znf-form-fields {
  display: grid;
  gap: calc(var(--znf-spacing) * var(--znf-gap-size));
  column-gap: calc(var(--znf-h-spacing, var(--znf-spacing)) * var(--znf-h-gap-size, var(--znf-gap-size)));
  padding: 0;
  margin: 0;
  grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media screen and (max-width: 768px) {
  .znf-form-fields {
    display: flex;
    flex-direction: column;
  }
}

.znf-form-row {
  display: grid;
  gap: var(--znf-h-spacing);
  gap: calc(var(--znf-h-spacing, var(--znf-spacing)) * var(--znf-h-gap-size, var(--znf-gap-size)));
}
.znf-form-row.--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 768px) {
  .znf-form-row.--cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--znf-v-spacing, var(--znf-spacing)) * var(--znf-gap-size));
  }
}

.znf-form-field {
  position: relative;
  font-size: var(--znf-input-font-size);
  width: 100%;
  display: flex;
  flex-direction: column;
}
.znf-form-field label {
  display: block;
  font-weight: var(--znf-label-font-weight, 500);
  margin-bottom: calc(var(--znf-spacing) * 2);
}
.znf-form-field.--required > label::after,
.znf-form-field.--required .znf-input > label::after, .znf-form-field.--required > .znf-checkbox-wrapper label::after {
  content: "*";
  margin-left: 0.125rem;
  color: red;
}
.znf-form-field.--required > label + .znf-checkbox-wrapper label::after {
  content: none;
}
.znf-form-field.--dyn .znf-input input[type],
.znf-form-field.--dyn .znf-input textarea {
  padding-block-start: calc(var(--znf-spacing) * var(--znf-v-multiplier) * 1.5);
  padding-block-end: calc(var(--znf-spacing) * var(--znf-v-multiplier) / 2);
}
.znf-form-field.--dyn .znf-input-icon ~ label {
  left: calc(var(--znf-spacing) * var(--znf-h-multiplier) + var(--znf-spacing) * var(--znf-icon-size) + var(--znf-spacing) * 2);
}
.znf-form-field.--dyn label {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: calc(var(--znf-spacing) * var(--znf-v-multiplier));
  left: calc(var(--znf-spacing) * var(--znf-h-multiplier));
  transition: all 300ms ease-out;
  transform-origin: top left;
  transform: translateY(0);
  line-height: var(--znf-input-line-height);
  opacity: 1;
}
.znf-form-field.--dyn .--captcha label {
  left: calc(var(--znf-spacing) * var(--znf-h-multiplier) * 7);
}
.znf-form-field.--dyn input:focus ~ label,
.znf-form-field.--dyn input:not(:placeholder-shown) ~ label,
.znf-form-field.--dyn textarea:focus ~ label,
.znf-form-field.--dyn textarea:not(:placeholder-shown) ~ label {
  transform: translateY(calc(var(--znf-spacing) * -1.75)) scale(0.75);
  opacity: 0.75;
}
.znf-form-field.--align-center {
  align-items: center;
}
.znf-form-field.--align-left {
  align-items: flex-start;
}
.znf-form-field.--align-right {
  align-items: flex-end;
}
.znf-form-field.--w-25 > button[type=submit] {
  width: 25%;
}
.znf-form-field.--w-50 > button[type=submit] {
  width: 50%;
}
.znf-form-field.--w-full > button[type=submit] {
  width: 100%;
}
.znf-form-field.has-error label {
  color: var(--znf-error-color);
}
.znf-form-field.has-error .znf-input {
  border-color: var(--znf-error-color);
}
.znf-form-field.has-error input,
.znf-form-field.has-error select,
.znf-form-field.has-error textarea {
  background-color: var(--znf-error-background-color);
}

.znf-form-submit {
  justify-content: flex-end;
}

.znf-input {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  background-color: var(--znf-input-background-color, var(--znf-base));
  border-style: var(--znf-input-border-style);
  border-width: var(--znf-input-border-width);
  border-color: var(--znf-input-border-color, var(--znf-secondary));
  border-radius: calc(var(--znf-spacing) * var(--znf-input-border-radius));
  padding: 0;
  margin: 0;
}
.znf-input.--captcha {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.znf-input.--rounded-full {
  border-radius: calc(var(--znf-spacing) * var(--znf-v-multiplier) + var(--znf-input-font-size) * var(--znf-input-line-height) / 2);
}
.znf-input:focus-within {
  border-color: var(--znf-input-focus-border-color, var(--znf-primary));
}
.znf-input select.znf-control,
.znf-input input[type].znf-control,
.znf-input textarea.znf-control {
  display: block;
  width: 100%;
  color: var(--znf-input-color, var(--znf-accent1));
  line-height: var(--znf-input-line-height);
  padding-block: calc(var(--znf-spacing) * var(--znf-v-multiplier));
  padding-inline: calc(var(--znf-spacing) * var(--znf-h-multiplier));
  margin: 0;
}
.znf-input select.znf-control:focus,
.znf-input input[type].znf-control:focus,
.znf-input textarea.znf-control:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.znf-input select.znf-control::placeholder,
.znf-input input[type].znf-control::placeholder,
.znf-input textarea.znf-control::placeholder {
  color: var(--znf-input-placeholder-color, color-mix(in srgb, var(--znf-accent3) 80%, white 50%));
}
.znf-input select {
  padding-inline-end: calc(var(--znf-spacing) * 2 * var(--znf-h-multiplier));
}
.znf-input.--textarea .znf-input-icon {
  height: calc(var(--znf-spacing) * var(--znf-v-multiplier) * 2 + var(--znf-input-line-height) * 1em);
}
.znf-input .znf-input-icon {
  display: flex;
  position: absolute;
  align-items: center;
  pointer-events: none;
  padding-inline-start: calc(var(--znf-spacing) * var(--znf-h-multiplier));
  inset-inline-start: calc(var(--znf-spacing) * 0);
  inset-block: calc(var(--znf-spacing) * 0);
}
.znf-input .znf-input-icon.--textarea {
  padding-block-start: calc(var(--znf-spacing) * var(--znf-v-multiplier));
}
.znf-input .znf-input-icon svg {
  color: var(--znf-icon-color, var(--znf-accent2, var(--znf-input-color, var(--znf-accent1))));
  flex-shrink: 0;
  width: calc(var(--znf-spacing) * var(--znf-icon-size));
  height: calc(var(--znf-spacing) * var(--znf-icon-size));
}
.znf-input .znf-input-icon + select.znf-control, .znf-input .znf-input-icon + input[type].znf-control, .znf-input .znf-input-icon + textarea.znf-control {
  padding-inline-start: calc(var(--znf-spacing) * var(--znf-h-multiplier) + var(--znf-spacing) * var(--znf-icon-size) + var(--znf-spacing) * 2);
}

.znf-input-captcha {
  position: absolute;
  display: flex;
  align-items: center;
  width: calc(60px + 0.5rem + 24px);
}
.znf-input-captcha svg {
  color: var(--znf-icon-color, var(--znf-accent2, var(--znf-input-color, var(--znf-accent1))));
  flex-shrink: 0;
  width: calc(var(--znf-spacing) * var(--znf-icon-size));
  height: calc(var(--znf-spacing) * var(--znf-icon-size));
}
.znf-input-captcha + select.znf-control, .znf-input-captcha + input[type=text].znf-control {
  padding-inline-start: calc(var(--znf-spacing) * var(--znf-h-multiplier) + 64px + 24px + var(--znf-spacing) * 2);
}

.znf-captcha-wrapper {
  display: flex;
  align-items: flex-end;
}

.znf-captcha-image {
  display: block;
  margin-left: calc(var(--znf-spacing) * 2);
  border-radius: calc(var(--znf-spacing) * var(--znf-input-border-radius));
}

.znf-captcha-regen {
  font-size: 0.9em;
  width: 32px;
}

.znf-captcha-loading {
  font-size: var(--znf-input-font-size);
  margin-bottom: 10px;
  color: #808080;
}

.znf-captcha-loading::after {
  content: "";
  margin-left: 8px;
  border: 2px solid #ccc;
  border-top: 2px solid #333;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: inline-block;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.znf-captcha-loading.--hidden {
  display: none;
}

.znf-suggest {
  position: absolute;
  z-index: 10;
  background-color: white;
  border: 1px solid #d4ced3;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
}
.znf-suggest.--hidden {
  display: none;
}

.znf-suggest-info {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #6b7280;
  font-style: italic;
}

.znf-suggest-item {
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  border-radius: 0.25rem;
  font-weight: 500;
}
.znf-suggest-item.--selected, .znf-suggest-item:hover {
  background-color: #dee4ff;
}
.znf-suggest-item .znf-suggest-email-text {
  font-weight: 400;
  color: #318be5;
  font-style: italic;
}

.znf-error {
  color: red;
  margin: 0.5rem 0 0 0;
  font-size: 0.75rem;
}

.zenform-confirmation-message {
  padding: 1em;
  margin-block: 1em;
  background-color: rgba(246, 246, 246, 0.5019607843);
  border: 1px solid rgba(212, 206, 211, 0.5019607843);
}

/*# sourceMappingURL=zenform.css.map */