@charset "UTF-8";
.wsf-form {
  padding: 0 !important;
  /* -----------------------------
       Layout & sections
    ----------------------------- */
  /* -----------------------------
       TEXT INPUTS ONLY
       (checkbox & radio excluded)
    ----------------------------- */
  /* -----------------------------
       Floating labels (text fields)
    ----------------------------- */
  /* -----------------------------
       Buttons
    ----------------------------- */
  /* =================================================
       🔥 HARD FIX: CHECKBOX & RADIO (NO DELAY)
       ================================================= */
  /* make sure parents don't animate them */
}
.wsf-form .wsf-field-wrapper:last-child {
  margin-bottom: 0;
}
.wsf-form .wsf-grid.wsf-sections {
  gap: var(--content-gap);
  margin-left: 0;
  margin-right: 0;
}
.wsf-form fieldset.wsf-tile.wsf-section {
  border-width: var(--card-border-width, var(--border-width));
  border-style: var(--card-border-style, var(--border-style));
  border-color: var(--card-border-color, var(--base-ultra-light));
  border-radius: var(--card-radius, var(--radius, 0));
  padding: var(--card-padding, var(--space-m));
  background: var(--card-background, var(--white));
  color: var(--card-text-color, var(--body-color, var(--base)));
}
.wsf-form .wsf-field-wrapper[data-type="html"] {
  margin-bottom: var(--space-s) !important;
}
.wsf-form input:not([type="checkbox"]) :not([type="radio"]) :not([type="submit"]), .wsf-form select, .wsf-form textarea {
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  color: currentcolor;
  font-size: inherit;
  line-height: 40px;
  border-radius: 0 !important;
  outline: none;
  padding: 0 12px;
  transition: var(--bricks-transition);
  width: 100%;
}
.wsf-form input:focus-visible, .wsf-form select:focus-visible, .wsf-form textarea:focus-visible {
  outline-style: solid !important;
  outline-color: var(--focus-color) !important;
  outline-width: var(--focus-width) !important;
  outline-offset: var(--focus-offset) !important;
}
.wsf-form .wsf-field:focus {
  border: 1px solid var(--bricks-border-color) !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
.wsf-form .wsf-field:hover {
  border: 1px solid var(--bricks-border-color) !important;
}
.wsf-form input:not([type="checkbox"]) :not([type="radio"]) :not(:placeholder-shown).wsf-field ~ label.wsf-label, .wsf-form textarea:not(:placeholder-shown).wsf-field ~ label.wsf-label, .wsf-form select.wsf-field ~ label.wsf-label, .wsf-form input:focus.wsf-field ~ label.wsf-label {
  color: var(--primary) !important;
}
.wsf-form input:not([type="checkbox"]):not([type="radio"]) ~ label.wsf-label, .wsf-form select ~ label.wsf-label, .wsf-form textarea ~ label.wsf-label {
  color: var(--base) !important;
}
.wsf-form button.wsf-button {
  border-radius: 0 !important;
  font-weight: var(--btn-font-weight) !important;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--white) !important;
  transition: var(--btn-transition, var(--transition)) !important;
  padding-block: calc(var(--btn-padding-block) * var(--btn-size)) !important;
  padding-inline: calc(var(--btn-padding-inline) * var(--btn-size)) !important;
  --btn-size: .6;
}
.wsf-form button.wsf-button:hover {
  background-color: var(--secondary-dark) !important;
  border-color: var(--secondary-dark) !important;
  color: var(--primary) !important;
}
.wsf-form input[type="checkbox"] {
  /* reset EVERYTHING that causes repaint delay */
  all: revert !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
.wsf-form .wsf-option:has(input[type="checkbox"]), .wsf-form .wsf-field-wrapper:has(input[type="checkbox"]) {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}
.wsf-form input[type="checkbox"] + label {
  transition: none !important;
}