form label {
  margin-bottom: var(--margin-sm);
}

form input:not(:last-child) {
  margin-bottom: var(--margin-xl);
}

input {
  padding: var(--padding-sm);
  border: 1px solid var(--default-border-color) !important;
  border-radius: var(--border-radius-sm);
}

input:focus {
  border-color: #52545d !important;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: var(--padding-xs);
  padding: 4px;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

.checkbox-container.checked {
  background-color: #e0f1f9;
}

.checkbox-container input {
  clip: rect(0, 0, 0, 0);
  border: 0;
  height: 0.0625rem;
  margin: -0.0625rem;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 0.0625rem;
}

.checkbox-container::before {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  content: "";
  border: 2px solid #2a2e2e;
  overflow: hidden;
}

.checkbox-container.checked::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f00c";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xxs);
  border-color: #64b5f6;
  color: var(--default-link-color);
  background-color: var(--white);
}

.checkbox-container input[type="checkbox"] + label {
  cursor: pointer;
  user-select: none;
}

.checkbox-container .checkbox-text {
  font-size: var(--font-size-sm);
}

.checkbox {
  border: 1px solid var(--darker-border-color) !important;
  margin-right: var(--margin-sm);
}

/* Signup form specific styles - scoped to avoid affecting other forms */
.signup-form__field-group {
  display: grid;
  margin-bottom: var(--margin-xl);
}

.signup-form__field-group input {
  margin-bottom: 0 !important;
}

.signup-form__input {
  width: 100%;
}

.signup-form__input--error {
  border-color: #ac0824 !important;
  background-color: #fff0f3 !important;
  box-shadow: 0 0 0 1px #ac0824;
  color: #f80a33 !important;
}

.signup-form__field-error {
  margin-top: 4px;
  margin-bottom: var(--margin-sm);
  color: var(--error);
  font-style: italic;
  font-size: var(--font-size-xs);
}

.signup-form__field-error a {
  color: var(--error) !important;
  text-decoration: underline !important;
}

.form-error-box {
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--error);
  background: var(--error-subtle, #fff0f3);
  text-align: center;
  padding: var(--padding-xs);
  color: var(--black);
  font-size: var(--font-size-md);
  margin-bottom: var(--margin-md);
}

.form-error-box a {
  color: var(--error);
  text-decoration: underline;
}

.form-errors {
  padding: 0 !important;
}

.form-errors ul {
  list-style-type: none;
  margin: 0 !important;
  padding: 0 !important;
}

.form-errors li {
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--error);
  background: var(--error-subtle, #fff0f3);
  text-align: center;
  padding: var(--padding-xs);
  color: var(--black);
}

.form-errors li:not(:last-child) {
  margin-bottom: var(--margin-sm);
}
