.form-item {
  margin-bottom: var(--spacing-5);
  display: flex;
  flex-direction: column;
}

.form-item label {
  font-weight: 500;
  margin-bottom: var(--spacing-2);
  color: var(--color-gray-800);
  font-size: 0.9375rem; /* 15px */
}

/* Inputs, Textareas, Selects */
.form-text,
.form-email,
.form-tel,
.form-textarea,
.form-type-date input,
.form-select {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-family: var(--font-family-sans);
  font-size: 1rem;
  color: var(--color-gray-800);
  background-color: var(--color-white);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.form-text:hover,
.form-email:hover,
.form-tel:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--color-gray-400);
}

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

.form-text::placeholder,
.form-textarea::placeholder {
  color: var(--color-gray-400);
}

/* Form Descriptions (Help text) */
.description {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
}

/* Checkboxes and Radios */
.form-checkbox,
.form-radio {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Drupal specific wrappers */
.form-actions {
  margin-top: var(--spacing-6);
  display: flex;
  gap: var(--spacing-4);
}
