/**
 * @file forms.css
 * Global form styles — accessible, consistent.
 */

.form-item {
  margin-bottom: var(--mp-space-5);
}

.form-item label {
  display: block;
  font-weight: 600;
  font-size: var(--mp-text-sm);
  color: var(--mp-text-secondary);
  margin-bottom: var(--mp-space-1);
}

.form-item label .form-required {
  color: var(--mp-error);
  margin-left: 2px;
}

.form-text,
.form-email,
.form-url,
.form-search,
.form-tel,
.form-number,
textarea,
select {
  width: 100%;
  padding: var(--mp-space-3) var(--mp-space-4);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: var(--mp-white);
  color: var(--mp-text);
  font-family: var(--mp-font-primary);
  font-size: var(--mp-text-base);
  line-height: var(--mp-leading-normal);
  transition: border-color var(--mp-transition-fast),
              box-shadow var(--mp-transition-fast);
}

.form-text:focus,
.form-email:focus,
textarea:focus,
select:focus {
  border-color: var(--mp-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.12);
}

.form-description {
  font-size: var(--mp-text-xs);
  color: var(--mp-text-muted);
  margin-top: var(--mp-space-1);
}

/* Textarea */
textarea {
  min-height: 120px;
  resize: vertical;
}

/* Form actions bar */
.form-actions {
  display: flex;
  gap: var(--mp-space-3);
  flex-wrap: wrap;
  margin-top: var(--mp-space-6);
}