.jj-gimbalforms-form-wrap {
  box-sizing: border-box;
  font-family: var(--gimbalforms-font-family, inherit);
  color: var(--gimbalforms-color-text, #111827);
  line-height: var(--gimbalforms-label-line-height, 1.5);
  max-width: var(--gimbalforms-container-max-width, 640px);
  margin-inline: auto;
  padding: var(--gimbalforms-container-padding, 1.5rem);
  background: var(--gimbalforms-color-surface, #fff);
  border: var(--gimbalforms-container-border-width, 1px) solid var(--gimbalforms-color-border, #d1d5db);
  border-radius: var(--gimbalforms-container-radius, 0.5rem);
  box-shadow: var(--gimbalforms-shadow, none);
  container-type: inline-size;
  container-name: gimbal;
}

.jj-gimbalforms-form-wrap.jj-gimbalforms-align-start {
  margin-inline: 0 auto;
}

.jj-gimbalforms-form-wrap.jj-gimbalforms-transparent {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

.jj-gimbalforms-form-wrap *,
.jj-gimbalforms-form-wrap *::before,
.jj-gimbalforms-form-wrap *::after {
  box-sizing: border-box;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-form-title {
  font-size: var(--gimbalforms-heading-size, 1.25rem);
  margin: 0 0 var(--gimbalforms-space-section, 1.5rem);
  color: var(--gimbalforms-color-text, #111827);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-form-intro {
  font-size: var(--gimbalforms-description-size, 1rem);
  color: var(--gimbalforms-color-muted, #4b5563);
  margin: 0 0 var(--gimbalforms-space-section, 1.5rem);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gimbalforms-space-row, 1rem) var(--gimbalforms-space-column, 1rem);
  margin-bottom: var(--gimbalforms-space-section, 1.5rem);
}

.jj-gimbalforms-form-wrap.jj-gimbalforms-columns-one .jj-gimbalforms-fields {
  grid-template-columns: 1fr;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-span-full {
  grid-column: 1 / -1;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-span-half {
  grid-column: span 1;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field {
  display: block;
  width: 100%;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field-label {
  display: block;
  font-size: var(--gimbalforms-label-size, 0.875rem);
  font-weight: var(--gimbalforms-label-weight, 600);
  line-height: var(--gimbalforms-label-line-height, 1.4);
  color: var(--gimbalforms-label-color, var(--gimbalforms-color-text, #111827));
  margin-bottom: var(--gimbalforms-field-gap, 0.35rem);
  overflow-wrap: anywhere;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field-hint {
  display: block;
  font-size: var(--gimbalforms-hint-size, 0.8125rem);
  color: var(--gimbalforms-color-muted, #4b5563);
  margin-bottom: var(--gimbalforms-field-gap, 0.35rem);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-required {
  color: var(--gimbalforms-color-error, #b91c1c);
  margin-left: 0.15rem;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field input,
.jj-gimbalforms-form-wrap .jj-gimbalforms-field textarea {
  width: 100%;
  min-height: var(--gimbalforms-input-min-height, 44px);
  font-size: var(--gimbalforms-input-size, 1rem);
  padding: var(--gimbalforms-input-padding, 0.625rem 0.75rem);
  border: var(--gimbalforms-input-border-width, 1px) solid var(--gimbalforms-input-border-color, #d1d5db);
  border-radius: var(--gimbalforms-input-radius, 0.375rem);
  background: var(--gimbalforms-input-bg, #fff);
  color: var(--gimbalforms-input-text, #111827);
  overflow-wrap: anywhere;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field textarea {
  min-height: var(--gimbalforms-textarea-min-height, 120px);
  resize: var(--gimbalforms-textarea-resize, vertical);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field input::placeholder,
.jj-gimbalforms-form-wrap .jj-gimbalforms-field textarea::placeholder {
  font-size: var(--gimbalforms-placeholder-size, 1rem);
  color: var(--gimbalforms-color-muted, #4b5563);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field input:focus-visible,
.jj-gimbalforms-form-wrap .jj-gimbalforms-field textarea:focus-visible,
.jj-gimbalforms-form-wrap .jj-gimbalforms-button:focus-visible {
  outline: 2px solid var(--gimbalforms-color-focus, #1d4ed8);
  outline-offset: 2px;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field-focused .jj-gimbalforms-field input,
.jj-gimbalforms-form-wrap .jj-gimbalforms-field-focused .jj-gimbalforms-field textarea {
  border-color: var(--gimbalforms-color-focus, #1d4ed8);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field-error {
  font-size: var(--gimbalforms-hint-size, 0.8125rem);
  color: var(--gimbalforms-color-error, #b91c1c);
  margin: var(--gimbalforms-error-gap, 0.25rem) 0 0;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field-error::before {
  content: "Error: ";
  color: var(--gimbalforms-color-error, #b91c1c);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-error-summary {
  font-size: var(--gimbalforms-message-size, 0.875rem);
  color: var(--gimbalforms-color-error, #b91c1c);
  margin-bottom: var(--gimbalforms-field-gap, 1rem);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-messages {
  margin-bottom: var(--gimbalforms-space-section, 1.5rem);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-message {
  font-size: var(--gimbalforms-message-size, 0.875rem);
  margin: 0;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-message-success::before {
  content: "Saved: ";
  color: var(--gimbalforms-color-success, #166534);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-message-error::before {
  content: "Error: ";
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-verification-note {
  font-size: var(--gimbalforms-hint-size, 0.8125rem);
  color: var(--gimbalforms-color-muted, #4b5563);
  margin: 0 0 var(--gimbalforms-space-section, 1.5rem);
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gimbalforms-button-min-height, 44px);
  padding: var(--gimbalforms-button-padding-y, 0.625rem) var(--gimbalforms-button-padding-x, 1.25rem);
  font-size: var(--gimbalforms-button-size, 1rem);
  border-radius: var(--gimbalforms-button-radius, 0.375rem);
  border: 1px solid var(--gimbalforms-button-border, #1d4ed8);
  background: var(--gimbalforms-button-bg, #1d4ed8);
  color: var(--gimbalforms-button-fg, #fff);
  cursor: pointer;
}

.jj-gimbalforms-form-wrap.jj-gimbalforms-button-full .jj-gimbalforms-button {
  width: 100%;
}

.jj-gimbalforms-form-wrap.jj-gimbalforms-button-align-center .jj-gimbalforms-button {
  margin-inline: auto;
}

.jj-gimbalforms-form-wrap.jj-gimbalforms-button-align-stretch .jj-gimbalforms-button {
  width: 100%;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-button:hover {
  color: var(--gimbalforms-button-hover-fg, var(--gimbalforms-button-fg, #fff));
  background: var(--gimbalforms-button-hover-bg, var(--gimbalforms-button-bg, #1d4ed8));
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-button:focus-visible {
  color: var(--gimbalforms-button-focus-fg, var(--gimbalforms-button-fg, #fff));
  background: var(--gimbalforms-button-focus-bg, var(--gimbalforms-button-bg, #1d4ed8));
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-button:active {
  color: var(--gimbalforms-button-active-fg, var(--gimbalforms-button-fg, #fff));
  background: var(--gimbalforms-button-active-bg, var(--gimbalforms-button-bg, #1d4ed8));
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-button[disabled] {
  color: var(--gimbalforms-button-disabled-fg, var(--gimbalforms-button-fg, #fff));
  background: var(--gimbalforms-button-disabled-bg, var(--gimbalforms-button-bg, #1d4ed8));
  cursor: not-allowed;
  opacity: 0.72;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-button[data-submitting="1"] {
  pointer-events: none;
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-turnstile-placeholder {
  border: 1px dashed var(--gimbalforms-color-border, #d1d5db);
  padding: 1rem;
  margin-bottom: var(--gimbalforms-space-section, 1.5rem);
  color: var(--gimbalforms-color-muted, #4b5563);
  text-align: center;
}

@container gimbal (max-width: 560px) {
  .jj-gimbalforms-form-wrap .jj-gimbalforms-fields {
    grid-template-columns: 1fr;
  }

  .jj-gimbalforms-form-wrap .jj-gimbalforms-span-half {
    grid-column: 1 / -1;
  }
}

.jj-gimbalforms-form-wrap[data-gimbalforms-stack-below] {
  --gimbalforms-stack-bp: 560px;
}

@container gimbal (max-width: var(--gimbalforms-stack-bp, 560px)) {
  .jj-gimbalforms-form-wrap[data-gimbalforms-stack-below] .jj-gimbalforms-fields {
    grid-template-columns: 1fr;
  }

  .jj-gimbalforms-form-wrap[data-gimbalforms-stack-below] .jj-gimbalforms-span-half {
    grid-column: 1 / -1;
  }
}

@media (max-width: 559px) {
  .jj-gimbalforms-form-wrap .jj-gimbalforms-fields {
    grid-template-columns: 1fr;
  }

  .jj-gimbalforms-form-wrap .jj-gimbalforms-span-half {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jj-gimbalforms-form-wrap .jj-gimbalforms-button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .jj-gimbalforms-form-wrap .jj-gimbalforms-field input,
  .jj-gimbalforms-form-wrap .jj-gimbalforms-field textarea,
  .jj-gimbalforms-form-wrap .jj-gimbalforms-button {
    border: 1px solid CanvasText;
  }
}

.jj-gimbalforms-form-wrap .jj-gimbalforms-field input:-webkit-autofill,
.jj-gimbalforms-form-wrap .jj-gimbalforms-field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--gimbalforms-input-text, #111827);
}
