/* Shared Reach form styling. */

.reach-form .form-label,
.reach-form legend {
  color: var(--theme-text);
  font-weight: 600;
  margin-bottom: 0.55rem;
}

.reach-form .form-control,
.reach-form .form-select {
  min-height: 3.25rem;
  border-color: var(--theme-border);
  border-radius: var(--theme-radius-sm);
  color: var(--theme-text);
  background-color: var(--theme-surface);
  box-shadow: none;
}

.reach-form textarea.form-control {
  min-height: 10rem;
  resize: vertical;
}

.reach-form .form-control:focus,
.reach-form .form-select:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.12);
}

.reach-form .form-control::placeholder {
  color: var(--theme-text-soft);
}

.reach-form .form-check-input:checked {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.reach-submit-btn {
  --bs-btn-color: var(--theme-primary-contrast);
  --bs-btn-bg: var(--theme-primary);
  --bs-btn-border-color: var(--theme-primary);
  --bs-btn-hover-color: var(--theme-primary-contrast);
  --bs-btn-hover-bg: color-mix(in srgb, var(--theme-primary) 86%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--theme-primary) 86%, black);
  --bs-btn-active-color: var(--theme-primary-contrast);
  --bs-btn-active-bg: color-mix(in srgb, var(--theme-primary) 74%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--theme-primary) 74%, black);
}