.swe-content-form .flow {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.swe-content-form .widget-size-100,
.swe-content-form .widget-size-75,
.swe-content-form .widget-size-66,
.swe-content-form .widget-size-50,
.swe-content-form .widget-size-33,
.swe-content-form .widget-size-25 {
  flex-shrink: 0;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 576px) {
  .swe-content-form .widget-size-25 { width: 25%; }
  .swe-content-form .widget-size-33 { width: 33.33333333%; }
  .swe-content-form .widget-size-50 { width: 50%; }
  .swe-content-form .widget-size-66 { width: 66.66666667%; }
  .swe-content-form .widget-size-75 { width: 75%; }
}

.swe-content-form .widget-align-left { text-align: left; }
.swe-content-form .widget-align-center { text-align: center; }
.swe-content-form .widget-align-right { text-align: right; }
.swe-content-form .widget-align-justify { text-align: justify; }

.swe-content-form .form-label {
  color: var(--swe-form-label-color, #212529);
  font-size: var(--swe-form-label-size, 0.95rem);
  font-weight: var(--swe-form-label-weight, 600);
  margin-bottom: 0.35rem;
}

.swe-content-form .form-control,
.swe-content-form .form-select {
  min-height: 2.75rem;
}

.swe-content-form .field-validation-error,
.swe-content-form .validation-summary-errors {
  display: block;
  margin-top: 0.35rem;
  color: var(--swe-form-validation-color, #dc3545);
  font-size: var(--swe-form-validation-font-size, 0.875rem);
  font-weight: var(--swe-form-validation-font-weight, 600);
  text-align: left;
}

.swe-content-form .field-validation-valid {
  display: none;
}

.swe-content-form .input-validation-error,
.swe-content-form .is-invalid {
  border-color: var(--swe-form-validation-border-color, #dc3545) !important;
}

.swe-content-form .input-validation-error:focus,
.swe-content-form .is-invalid:focus {
  border-color: var(--swe-form-validation-border-color, #dc3545) !important;
  box-shadow: 0 0 0 0.2rem var(--swe-form-validation-focus-shadow-color, rgba(220, 53, 69, 0.18)) !important;
}

.swe-content-form .form-check {
  margin-top: 0.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.swe-content-form .form-check .form-check-input,
.swe-content-form .swe-form-check-input,
.swe-content-form input[type="checkbox"] {
  width: var(--swe-form-checkbox-size, 1.25rem);
  height: var(--swe-form-checkbox-size, 1.25rem);
  min-width: var(--swe-form-checkbox-size, 1.25rem);
  margin-top: var(--swe-form-checkbox-margin-top, 0.15rem);
  border: var(--swe-form-checkbox-border-width, 2px) solid var(--swe-form-checkbox-border-color, #495057);
  border-radius: var(--swe-form-checkbox-border-radius, 0.25rem);
  background-color: var(--swe-form-checkbox-background-color, #ffffff);
  box-shadow: none;
  flex: 0 0 auto;
}

.swe-content-form .form-check .form-check-input:checked,
.swe-content-form .swe-form-check-input:checked,
.swe-content-form input[type="checkbox"]:checked {
  background-color: var(--swe-form-checkbox-checked-background-color, #212529);
  border-color: var(--swe-form-checkbox-checked-border-color, #212529);
}

.swe-content-form .form-check .form-check-input:focus,
.swe-content-form .swe-form-check-input:focus,
.swe-content-form input[type="checkbox"]:focus {
  border-color: var(--swe-form-checkbox-focus-border-color, #212529);
  box-shadow: 0 0 0 0.2rem var(--swe-form-checkbox-focus-shadow-color, rgba(33, 37, 41, 0.18));
}

.swe-content-form .form-check .form-check-label,
.swe-content-form .widget-input label,
.swe-content-form label[for] {
  cursor: pointer;
}

.swe-content-form .btn,
.swe-content-form button[type="submit"],
.swe-content-form input[type="submit"] {
  margin-top: 0.25rem;
}

.swe-content-form .btn-primary,
.swe-content-form button[type="submit"].btn-primary,
.swe-content-form input[type="submit"].btn-primary {
  --bs-btn-color: var(--swe-form-button-color, #ffffff);
  --bs-btn-bg: var(--swe-form-button-background-color, #212529);
  --bs-btn-border-color: var(--swe-form-button-border-color, #212529);
  --bs-btn-hover-color: var(--swe-form-button-hover-color, #ffffff);
  --bs-btn-hover-bg: var(--swe-form-button-hover-background-color, #000000);
  --bs-btn-hover-border-color: var(--swe-form-button-hover-border-color, #000000);
  --bs-btn-active-color: var(--swe-form-button-active-color, var(--swe-form-button-hover-color, #ffffff));
  --bs-btn-active-bg: var(--swe-form-button-active-background-color, var(--swe-form-button-hover-background-color, #000000));
  --bs-btn-active-border-color: var(--swe-form-button-active-border-color, var(--swe-form-button-hover-border-color, #000000));
}

/* SWE forms: submit buttons without Bootstrap .btn-primary still inherit theme variables. */
/* SWE forms: submit buttons default to Bootstrap btn-dark btn-lg values, but remain custom-css friendly. */
.swe-content-form .btn-primary,
.swe-content-form button[type="submit"],
.swe-content-form input[type="submit"] {
  display: inline-block;
  padding: var(--swe-form-submit-padding, 0.5rem 1rem);
  font-size: var(--swe-form-submit-font-size, 1.25rem);
  line-height: var(--swe-form-submit-line-height, 1.5);
  border-radius: var(--swe-form-submit-border-radius, 0.3rem);
  color: var(--swe-form-submit-text-color, var(--swe-form-submit-color, #ffffff));
  background-color: var(--swe-form-submit-background-color, #212529);
  border: var(--swe-form-submit-border-width, 1px) solid var(--swe-form-submit-border-color, #212529);
}

.swe-content-form .btn-primary:hover,
.swe-content-form button[type="submit"]:hover,
.swe-content-form input[type="submit"]:hover {
  color: var(--swe-form-submit-hover-text-color, var(--swe-form-submit-hover-color, var(--swe-form-submit-text-color, var(--swe-form-submit-color, #ffffff))));
  background-color: var(--swe-form-submit-hover-background-color, #1c1f23);
  border-color: var(--swe-form-submit-hover-border-color, #1a1e21);
}
